-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
HeaderMenu requiring isActive prop [Bug]: #15351
Comments
Hi! I would love to take a look at this issue! Thanks! |
Hi @guidari! I will create a PR for this after this issue is resolved! Thank you! |
Awesome! We have a PR open to fix it. |
Hello @dbryan17, |
Hi @kuri-sun, |
Hi @dbryan17! I saw the error right now! I will take a look at the issue and get you back ASAP! Thank you 😄 |
Hi, @dbryan17 and @guidari! (Cause of the issue) carbon/packages/react/src/components/UIShell/HeaderMenu.js Lines 215 to 222 in 3f70e1d
(Solution) |
Package
@carbon/react, @carbon/icons
Browser
Chrome
Package version
carbon/react 1.44.0, icons-react 11.31.0
React version
18
Description
For some reason the
HeaderMenu
component is requiring theisActive
prop to always be true, or it breaks with:Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'isActive') Call Stack eval node_modules/@carbon/react/es/components/UIShell/HeaderMenu.js (151:70)
In earlier versions, I have never needed to provide the
isActive
prop toHeaderMenu
.Also, when following the carbon, react, next.js docs exactly (https://carbondesignsystem.com/developing/react-tutorial/step-1), I am getting the following warning in the console:
app-index.js:32 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
This is due to the use of the
Link
component around carbon components, as described in the docs.The CodeSandbox below is currently broken due to another issue
It will not let you import UI Shell components due to the following error in the next icons package:
Failed to compile ./node_modules/@carbon/icons-react/es/generated/bucket-8.js Module parse failed: Export 'Infinity' is not defined (2620:1241) | WatsonHealthLaunchStudy_1.propTypes = iconPropTypes; | } export { IbmCloudPakIntegration, IbmCloudPakMantaAutomatedDataLineage, IbmCloudPakMulticloudMgmt,...
Described in the linked issue.
Once that issue is fixed, the CodeSandbox will show the errors described above.
Reproduction/example
https://codesandbox.io/p/devbox/headermenu-issue-88wg4c?file=%2Fapp%2Fnavbar.js%3A26%2C47
Steps to reproduce
run in dev, after installing dependencies
Suggested Severity
Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.
Application/PAL
IBM CIO apps
Code of Conduct
The text was updated successfully, but these errors were encountered: