parcel icon indicating copy to clipboard operation
parcel copied to clipboard

Published 20 hours ago • verified publisher icon parcel-bundler

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

Open tpalacino opened this issue 1 year ago • 7 comments

🐛 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

tpalacino avatar Sep 27 '23 13:09 tpalacino