SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 1.01k forks source link

Minified React error #321 using Fluent 8 and React 17 with SPFx 1.16.1 #8699

Closed ugomidway closed 1 year ago

ugomidway commented 1 year ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

Additional environment details

SPFx: 1.16.1 React: 17.0.1 Node: 16.18.1

Describe the bug / error

I am facing some errors while using Fluent UI 8 with React 17.0.1 and SPFx 1.16.1. When I use react hooks I get the following error in Browser:

Something went wrong If the problem persists, contact the site administrator and give them the information in Technical Details. TECHNICAL DETAILS ERROR: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

CALL STACK: Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Object.ao (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_d696768268dfcd31b86684f5a270f4a4.js:69:64371) at t.useRef (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_d696768268dfcd31b86684f5a270f4a4.js:3:6809) at useId (https://localhost:4321/dist/demo-2-web-part.js:3103:59) at UHiu.Demo2.render (https://localhost:4321/dist/demo-2-web-part.js:14627:91) at Ko (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_d696768268dfcd31b86684f5a270f4a4.js:69:77161) at Go (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_d696768268dfcd31b86684f5a270f4a4.js:69:76960) at Ks (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_d696768268dfcd31b86684f5a270f4a4.js:69:117705) at wc (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_d696768268dfcd31b86684f5a270f4a4.js:69:103931) at Cc (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_d696768268dfcd31b86684f5a270f4a4.js:69:103859) at xc (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_d696768268dfcd31b86684f5a270f4a4.js:69:103722)

Trying to isolate the problem I have created a new project from scratch and create a componen of Fluent UI that uses react-hooks like "TeachingBubble" (with the code provided in the documentation of Fluent UI) but is does not work. No error at compiling time but when I execute the webpart in the SPFx workbench I get the error. It seems to be a problem with this import:

import { useBoolean, useId } from '@fluentui/react-hooks';

If I do not use useBoolean or UseId I do not get this error. I have been reading a lot about this problem and try everything posted in Internet with no luck.

Thanks very much.

Steps to reproduce

  1. Create a new project with SPFx 1.16.1
  2. Include a TeachingBubble component (or other that uses react-hooks)

Expected behavior

Not getting this error at execution time.

ghost commented 1 year ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

AJIXuMuK commented 1 year ago

@ugomidway - to set the expectations, SPFx is based on Fluent UI v7. So if you're using v8 - it may or may not work. From other side - could you provide the code sample to check what's potentially going on?

ugomidway commented 1 year ago

Thanks @AJIXuMuK for the quick response. I have created a new project using Fluent UI 7 and the behaviour is the same. I get no errors on compiling time but when I execute the webpart in the Workbench I get the 321 error listed in the ticket description.

The modules and versions installed on my project are: +-- @fluentui/react@7.203.0 +-- @microsoft/eslint-config-spfx@1.16.1 +-- @microsoft/eslint-plugin-spfx@1.16.1 +-- @microsoft/rush-stack-compiler-4.5@0.2.2 +-- @microsoft/sp-build-web@1.16.1 +-- @microsoft/sp-core-library@1.16.1 +-- @microsoft/sp-lodash-subset@1.16.1 +-- @microsoft/sp-module-interfaces@1.16.1 +-- @microsoft/sp-office-ui-fabric-core@1.16.1 +-- @microsoft/sp-property-pane@1.16.1 +-- @microsoft/sp-webpart-base@1.16.1 +-- @rushstack/eslint-config@2.5.1 +-- @types/react-dom@17.0.17 +-- @types/react@17.0.45 +-- @types/webpack-env@1.15.3 +-- @uifabric/react-hooks@7.16.4 +-- ajv@6.12.6 +-- bindings@1.5.0 extraneous +-- eslint-plugin-react-hooks@4.3.0 +-- file-uri-to-path@1.0.0 extraneous +-- gulp@4.0.2 +-- nan@2.17.0 extraneous +-- office-ui-fabric-react@7.203.0 +-- react-dom@17.0.1 +-- react@17.0.1 +-- tslib@2.3.1 `-- typescript@4.5.5

And below is the code of the Webpart component (is copied and adapted frrom the Fluent 7 Documentation):

import * as React from 'react'; //import styles from './Demo3.module.scss'; import { IDemo3Props } from './IDemo3Props'; import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble'; import { useBoolean } from '@uifabric/react-hooks';

const examplePrimaryButtonProps: IButtonProps = { children: 'Try it out', };

export default class Demo3 extends React.Component<IDemo3Props, {}> {

public render(): React.ReactElement { const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false); const exampleSecondaryButtonProps: IButtonProps = React.useMemo( () => ({ children: 'Maybe later', onClick: toggleTeachingBubbleVisible, }), [toggleTeachingBubbleVisible], );

return (
  <div>Example v2
    <DefaultButton
      id="targetButton"
      onClick={toggleTeachingBubbleVisible}
      text={teachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble'}
    />

    {teachingBubbleVisible && (
      <TeachingBubble
        target="#targetButton"
        primaryButtonProps={examplePrimaryButtonProps}
        secondaryButtonProps={exampleSecondaryButtonProps}
        onDismiss={toggleTeachingBubbleVisible}
        headline="Discover what’s trending around you"
      >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni
        harum non?
      </TeachingBubble>
    )}
  </div>
);

} }

AJIXuMuK commented 1 year ago

@ugomidway - React hooks can be used in function components only. You're trying to use it in the class component. You need to convert Demo3 to a function component.

ugomidway commented 1 year ago

Thanks a lot @AJIXuMuK. I have change the component to a function component and it works as expected.

Fixed! :-)

ghost commented 1 year ago

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues