TypeError: Cannot read properties of undefined (reading 'top')

[tpalacino]

🐛 bug report

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.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "$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"
  }
}

🤔 Expected Behavior

Adding a reference to PrimaryButton should render a PrimaryButton

😯 Current Behavior

Adding a reference to PrimaryButton causes the app to crash with a TypeError

React Crash Details

```powershell 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 ```

💁 Possible Solution

🔦 Context

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.

💻 Code Sample

fluentui-button-issue

🌍 Your Environment

Software	Version(s)
Parcel	2.9.3
Node	16.20.2
npm/Yarn	8.19.4
Operating System	Windows 11 Pro
OS Version	23H2
OS build	22631.2338
Experience	Windows Feature Experience Pack 1000.22674.1000.0

[mischnic]

I've cloned your repo and tried both yarn start and yarn build but both worked fine in the browser

[tpalacino]

I've cloned your repo and tried both yarn start and yarn build but both worked fine in the browser

Are you suggesting it's an issue with npm?

[mischnic]

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

[tpalacino]

Apparently I committed the workaround to that repo. I just removed it and now if you pull the latest, the issue can be reproduced.

[tpalacino]

@mischnic Is there any update you can provide here?

[tpalacino]

@mischnic is anybody looking into this bug?

[mischnic]

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)