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

tpalacino · 2023-09-27T13:37:51Z

🐛 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

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

The text was updated successfully, but these errors were encountered:

mischnic · 2023-09-27T19:31:21Z

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

tpalacino · 2023-09-27T19:36:09Z

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 · 2023-09-27T19:39:00Z

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 · 2023-09-27T19:53:59Z

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 · 2023-11-08T15:34:39Z

@mischnic Is there any update you can provide here?

tpalacino · 2024-05-07T00:36:48Z

@mischnic is anybody looking into this bug?

mischnic · 2024-05-09T09:51:55Z

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)

tpalacino mentioned this issue Sep 27, 2023

[Bug]: TypeError: Cannot read properties of undefined (reading 'top') microsoft/fluentui#29138

Closed

2 tasks

mischnic added the 🕐 Waiting label Sep 27, 2023

mischnic added 🐛 Bug 🐡 JS Codegen and removed 🕐 Waiting labels Sep 27, 2023

github-actions bot added the Stale Inactive issues label May 7, 2024

github-actions bot removed the Stale Inactive issues label May 7, 2024

mischnic added the ✔️ Confirmed Bug label May 9, 2024

mischnic linked a pull request May 9, 2024 that will close this issue

Fix imports used in member props #9710

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tpalacino commented Sep 27, 2023

mischnic commented Sep 27, 2023

tpalacino commented Sep 27, 2023

mischnic commented Sep 27, 2023

tpalacino commented Sep 27, 2023

tpalacino commented Nov 8, 2023

tpalacino commented May 7, 2024

mischnic commented May 9, 2024

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

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

Comments

tpalacino commented Sep 27, 2023

🐛 bug report

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

mischnic commented Sep 27, 2023

tpalacino commented Sep 27, 2023

mischnic commented Sep 27, 2023

tpalacino commented Sep 27, 2023

tpalacino commented Nov 8, 2023

tpalacino commented May 7, 2024

mischnic commented May 9, 2024