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

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

[ ] 💥 Internet Explorer
[X] 💥 Microsoft Edge
[X] 💥 Google Chrome
[ ] 💥 FireFox
[ ] 💥 Safari
[ ] mobile (iOS/iPadOS)
[ ] mobile (Android)
[ ] not applicable
[ ] other (enter in the "Additional environment details" area below)

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.

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

Create a new project with SPFx 1.16.1
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

SharePoint / sp-dev-docs