We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation .
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
Importing and using some components from the FluentUI component library result in the app crashing as described in this issue . A Microsoft MVP Hotell replied to that issue suggesting it has to do something with how parcel bundles things .
it has to do something with how parcel bundles things
{ "$schema" : " https://json.schemastore.org/package " , "name" : " app-client " , "version" : " 1.0.0 " , "description" : " " , "scripts" : { "start" : " parcel src/index.html " , "build" : " parcel build src/index.html " }, "keywords" : [], "author" : " " , "license" : " ISC " , "dependencies" : { "@fluentui/react" : " ^8.111.2 " , "react" : " ^18.2.0 " , "react-dom" : " ^18.2.0 " }, "devDependencies" : { "@parcel/transformer-typescript-tsc" : " ^2.9.3 " , "@types/react" : " ^18.2.18 " , "@types/react-dom" : " ^18.2.7 " , "parcel" : " ^2.9.3 " , "process" : " ^0.11.10 " , "typescript" : " ^5.1.6 " } }
Adding a reference to PrimaryButton should render a PrimaryButton
PrimaryButton
Adding a reference to PrimaryButton causes the app to crash with a TypeError
TypeError
TypeError: Cannot read properties of undefined (reading ' top ' ) iTAy0.tslib node_modules / @fluentui / react / lib / components / src / components / Callout / CalloutContent.base.tsx: 27 : 17 24 | const COMPONENT_NAME = ' CalloutContentBase ' ; 25 | 26 | const ANIMATIONS: { [ key : number ]: string | undefined } = { > 27 | [ RectangleEdge.top ]: AnimationClassNames.slideUpIn10 , | ^ 28 | [ RectangleEdge.bottom ]: AnimationClassNames.slideDownIn10 , 29 | [ RectangleEdge.left ]: AnimationClassNames.slideLeftIn10 , 30 | [ RectangleEdge.right ]: AnimationClassNames.slideRightIn10 , View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 lrB9f... / .. / Utilities node_modules / @fluentui / react / lib / components / src / components / Callout / CalloutContent.tsx: 3 1 | import * as React from ' react ' ; 2 | import { styled } from ' ../../Utilities ' ; > 3 | import { CalloutContentBase } from ' ./CalloutContent.base ' ; 4 | import { getStyles } from ' ./CalloutContent.styles ' ; 5 | import type { ICalloutProps } from ' ./Callout.types ' ; 6 | View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 5xAR3.tslib node_modules / @fluentui / react / lib / components / src / components / Callout / Callout.tsx: 2 1 | import * as React from ' react ' ; > 2 | import { CalloutContent } from ' ./CalloutContent ' ; 3 | import { Layer } from ' ../../Layer ' ; 4 | import type { ICalloutProps } from ' ./Callout.types ' ; 5 | View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 5NONK.. / Callout node_modules / @fluentui / react / lib / components / src / components / Callout / index.ts: 1 > 1 | export * from ' ./Callout ' ; 2 | export * from ' ./Callout.types ' ; 3 | export * from ' ./CalloutContent ' ; 4 | export * from ' ./CalloutContent.base ' ; View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 4KNCd.. / components / Callout / index node_modules / @fluentui / react / src / Callout.ts: 1 > 1 | export * from ' ./components/Callout/index ' ; 2 | View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 4ucpI.tslib node_modules / @fluentui / react / lib / components / src / components / ContextualMenu / ContextualMenu.base.tsx: 26 23 | FocusRects , 24 | } from ' ../../Utilities ' ; 25 | import { hasSubmenu , getIsChecked , isItemDisabled } from ' ../../utilities/contextualMenu/index ' ; > 26 | import { Callout } from ' ../../Callout ' ; 27 | import { ContextualMenuItem } from ' ./ContextualMenuItem ' ; 28 | import { 29 | ContextualMenuSplitButton , View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 i36b8.tslib node_modules / @fluentui / react / lib / components / src / components / ContextualMenu / ContextualMenu.tsx: 3 1 | import * as React from ' react ' ; 2 | import { styled , composeRenderFunction } from ' ../../Utilities ' ; > 3 | import { ContextualMenuBase } from ' ./ContextualMenu.base ' ; 4 | import { getStyles } from ' ./ContextualMenu.styles ' ; 5 | import type { IContextualMenuProps , IContextualMenuStyleProps , IContextualMenuStyles } from ' ./ContextualMenu.types ' ; 6 | View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 i6sRQ.. / ContextualMenu node_modules / @fluentui / react / lib / components / src / components / ContextualMenu / index.ts: 1 > 1 | export * from ' ./ContextualMenu ' ; 2 | export * from ' ./ContextualMenu.base ' ; 3 | export * from ' ./ContextualMenu.types ' ; 4 | export * from ' ./ContextualMenuItem ' ; View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 bZaH9.. / components / ContextualMenu / index node_modules / @fluentui / react / src / ContextualMenu.ts: 1 > 1 | export * from ' ./components/ContextualMenu/index ' ; 2 | View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 1O6TU.tslib node_modules / @fluentui / react / lib / components / src / components / Button / BaseButton.tsx: 26 23 | } from ' ../../Utilities ' ; 24 | import { Icon , FontIcon , ImageIcon } from ' ../../Icon ' ; 25 | import { DirectionalHint } from ' ../../common/DirectionalHint ' ; > 26 | import { ContextualMenu } from ' ../../ContextualMenu ' ; 27 | import { getBaseButtonClassNames } from ' ./BaseButton.classNames ' ; 28 | import { getSplitButtonClassNames as getBaseSplitButtonClassNames } from ' ./SplitButton/SplitButton.classNames ' ; 29 | import { KeytipData } from ' ../../KeytipData ' ; View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 9UW4Q.tslib node_modules / @fluentui / react / lib / components / Button / src / components / Button / DefaultButton / DefaultButton.tsx: 2 1 | import * as React from ' react ' ; > 2 | import { BaseButton } from ' ../BaseButton ' ; 3 | import { customizable , nullRender } from ' ../../../Utilities ' ; 4 | import { getStyles } from ' ./DefaultButton.styles ' ; 5 | import type { IButtonProps } from ' ../Button.types ' ; View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 jBi2p.tslib node_modules / @fluentui / react / lib / components / Button / src / components / Button / PrimaryButton / PrimaryButton.tsx: 3 1 | import * as React from ' react ' ; 2 | import { customizable , nullRender } from ' ../../../Utilities ' ; > 3 | import { DefaultButton } from ' ../DefaultButton/DefaultButton ' ; 4 | import type { IButtonProps } from ' ../Button.types ' ; 5 | 6 | /** View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 i8Cy0.. / BaseButton node_modules / @fluentui / react / lib / components / src / components / Button / index.ts: 10 7 | export * from ' ./CompoundButton/CompoundButton ' ; 8 | export * from ' ./DefaultButton/DefaultButton ' ; 9 | export * from ' ./MessageBarButton/MessageBarButton ' ; > 10 | export * from ' ./PrimaryButton/PrimaryButton ' ; 11 | export * from ' ./IconButton/IconButton ' ; 12 | export * from ' ./SplitButton/SplitButton.classNames ' ; 13 | export { ButtonGlobalClassNames } from ' ./BaseButton.classNames ' ; View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 gfSol.. / components / Button / index node_modules / @fluentui / react / src / Button.ts: 1 > 1 | export * from ' ./components/Button/index ' ; 2 | View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 48QFW.. / ActivityItem node_modules / @fluentui / react / src / index.ts: 19 16 | IBreadcrumbStyles , 17 | IDividerAsProps , 18 | } from ' ./Breadcrumb ' ; > 19 | export { 20 | ActionButton , 21 | BaseButton , 22 | // eslint - disable-next - line deprecation / deprecation View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 5zQKR.react / jsx - runtime / __parcel_source_root / pages / App.tsx: 1 > 1 | import { DetailsList , PrimaryButton , Stack , initializeIcons } from ' @fluentui/react ' 2 | 3 | initializeIcons() 4 | View compiled ▼ 2 stack frames were expanded. newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24 localRequire http: // localhost: 1234 / index.3d214d75.js: 84 : 35 ▲ 2 stack frames were expanded. kTF8O.. / App / __parcel_source_root / pages / index.ts: 1 > 1 | export * from ' ./App ' View compiled newRequire http: // localhost: 1234 / index.3d214d75.js: 71 : 24
I was just starting a React app that was using Fluent UI and as soon as I started building the application layout and added a the top navigation the app started crashing.
fluentui-button-issue
The text was updated successfully, but these errors were encountered:
I've cloned your repo and tried both yarn start and yarn build but both worked fine in the browser
yarn start
yarn build
Sorry, something went wrong.
Are you suggesting it's an issue with npm ?
npm
Are you sure it's failing for you? (Delete node_modules and run npm ci ) And if yes, is it with yarn start or yarn build
npm ci
Apparently I committed the workaround to that repo. I just removed it and now if you pull the latest, the issue can be reproduced.
@mischnic Is there any update you can provide here?
@mischnic is anybody looking into this bug?
I can reproduce it now. This does seem like a Parcel bug, but do note that upgrading fluentui also happens to fix it (by coincidence at least in your reproduction)
Successfully merging a pull request may close this issue.