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

tpalacino · 2023-09-12T18:12:06Z

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (10) x64 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 6.65 GB / 16.00 GB
  Browsers:
    Edge: Spartan (44.22621.2134.0), Chromium (116.0.1938.76)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://github.com/tpalacino/fluentui-button-issue

Bug Description

Actual Behavior

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

Expected Behavior

Adding a reference to PrimaryButton should render a PrimaryButton

Logs

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

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
The provided reproduction is a minimal reproducible example of the bug.

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

tpalacino · 2023-09-19T15:36:20Z

Workaround: tpalacino/fluentui-button-issue@6b9ac99

Just importing the initializeIcons function resolves the issue. You don't even have to call the function. This was an extremely frustrating week trying to figure out why a thing I wasn't even using was breaking my page.

Hotell · 2023-09-27T12:50:20Z

this is weird indeed, it has to do something with how parcel bundles things. I tried stackblitz and its throwing completely different errors https://stackblitz.com/edit/stackblitz-starters-m4gtzq?description=A%20create-react-app%20project%20based%20on%20react%20and%20react-dom&file=src%2Findex.js,src%2FApp.js,package.json&title=React%20Starter

while codepen (no bundler) just works ( even without initializeIcons )

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

Thanks for the reply. I've create an issue on Parcel. Hopefully they can figure it out.

microsoft-github-policy-service · 2024-03-25T14:35:20Z

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

github-actions bot added Fluent UI react (v8) Issues about @fluentui/react (v8) Needs: Triage 🔍 labels Sep 12, 2023

Hotell added Resolution: Soft Close Soft closing inactive issues over a certain period and removed Needs: Triage 🔍 labels Sep 27, 2023

tpalacino mentioned this issue Sep 27, 2023

TypeError: Cannot read properties of undefined (reading 'top') parcel-bundler/parcel#9275

Open

microsoft-github-policy-service bot closed this as completed Mar 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tpalacino commented Sep 12, 2023

tpalacino commented Sep 19, 2023

Hotell commented Sep 27, 2023

tpalacino commented Sep 27, 2023

microsoft-github-policy-service bot commented Mar 25, 2024

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

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

Comments

tpalacino commented Sep 12, 2023

Library

System Info

Are you reporting Accessibility issue?

Reproduction

Bug Description

Actual Behavior

Expected Behavior

Logs

Requested priority

Products/sites affected

Are you willing to submit a PR to fix?

Validations

tpalacino commented Sep 19, 2023

Hotell commented Sep 27, 2023

tpalacino commented Sep 27, 2023

microsoft-github-policy-service bot commented Mar 25, 2024