Can't add React to App Customizer

[wonderplayer]

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
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: 90.0.818.66
• SPFx version: 1.12.1
• Node.js version: 14.16.1
• yeoman version: 4.2.0
• SharePoint generator version: 1.12.1

Describe the bug / error

SPFx is not loaded when I try to use React.
The following message appears in the browser console:

Uncaught (in promise) Error: Failed to create application customizer 'ClientSideExtension.ApplicationCustomizer.970fe979-1d72-4e98-b295-3a9bf1f36291'.
Error information is 'Extension failed to load for componentId "970fe979-1d72-4e98-b295-3a9bf1f36291".'.

Tried on Linux as well with the same versions - doesn't work.

Steps to reproduce

1. Create a new version of a solution using yeoman generator.
2. Run npm i react@16 react-dom@16 @types/react@16 @types/react-dom@16 - Office react libraries have dependency on react > 16.8 and < 17, so use version between.
3. Import react in generated .ts file: import * as React from 'react';
4. Create basic react element in generated .ts file for app customizer after alert. Use the following line: const a = React.createElement("div", null, null);
5. Run gulp serve

Expected behavior

Alert gets displayed.

[ghost]

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

[wonderplayer]

Resolved.
npm i react@16 was installing 16.14.0 version of react, but actually 16.9.0 is required.
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/compatibility
Spend too much time on this one...

[wonderplayer]

Also, even if you use npm i [email protected] version 16.14.0 will be installed because npm adds ^ to package version.
I observed that Windows respects ^ sign, but Linux doesn't, so if you want to use React in SPFx, you should explicitly put 16.9.0 in package.

[ghost]

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