Skip to content
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

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

Open
tpalacino opened this issue Sep 27, 2023 · 7 comments · May be fixed by #9710
Open

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

tpalacino opened this issue Sep 27, 2023 · 7 comments · May be fixed by #9710

Comments

@tpalacino
Copy link

🐛 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:352 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
Copy link
Member

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

@tpalacino
Copy link
Author

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
Copy link
Member

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
Copy link
Author

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
Copy link
Author

@mischnic Is there any update you can provide here?

@github-actions github-actions bot added the Stale Inactive issues label May 7, 2024
@tpalacino
Copy link
Author

@mischnic is anybody looking into this bug?

@github-actions github-actions bot removed the Stale Inactive issues label May 7, 2024
@mischnic
Copy link
Member

mischnic commented May 9, 2024

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)

@mischnic mischnic linked a pull request May 9, 2024 that will close this issue
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants