[Bug]: Webpack fails with export 'useInsertionEffect' (imported as 'React') was not found in 'react in React 17 app

[spmonahan]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 11.07 GB / 31.59 GB
  Browsers:
    Edge: Spartan (44.22621.674.0), Chromium (106.0.1370.47), ChromiumDev (107.0.1418.8)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

See description

Bug Description

Actual Behavior

Repro:

1. Clone this repo and yarn to install/update all deps
2. Run yarn workspace @fluentui/stress-test stress-test dev
3. In your browser open http://localhost:9000/v9/stress-tree?r=button&fixtureName=xs_1&test=mount
4. See error message

The issue appears to be caused by this line in useFluentProviderThemeStyleTag. A similar issue was logged a while back against Emotion and Fluent uses the same technique to avoid this problem so I think the code is okay.

One recent change in stress-test is to use swc-loader to process Typescript/React. Looking into the generated code reveals:

let useInsertionEffect = react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect ? react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect : _fluentui_react_utilities__WEBPACK_IMPORTED_MODULE_1__.useIsomorphicLayoutEffect, createStyleTag = (target, id)=>{
    if (!target) return;
    let tag = target.createElement('style');
    return tag.setAttribute('id', id), target.head.appendChild(tag), tag;
}, insertSheet = (tag, rule)=>{
    let sheet = tag.sheet;
    sheet ? (sheet.cssRules.length > 0 && sheet.deleteRule(0), sheet.insertRule(rule, 0)) :  true && console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
};

It appears to be doing something clever here to avoid the string concatenation. After reading the SWC docs it's not clear that there is a way to disable this behavior (if it is indeed an issue with SWC).

This may also be related to the recent update to allow React 18 support (#24976, #24972)

Expected Behavior

I should be able to use fluentui/react and fluentui/react-components in a React 17 app.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.

[layershifter]

@spmonahan this behavior is indeed comes from SWC:

import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';

const useInsertionEffect = (React as never)['useInsertion' + 'Effect']
  ? (React as never)['useInsertion' + 'Effect']
  : useIsomorphicLayoutEffect;
console.log(useInsertionEffect)

// -------
// ⬇️⬇️⬇️
// -------

import { useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
import * as React from "react";
console.log(React.useInsertionEffect ? React.useInsertionEffect : useIsomorphicLayoutEffect);

But it happens only with enabled compression (can be verified in the playground). And it's enabled in the config:

fluentui/apps/stress-test/webpack/webpack.config.ts

Lines 56 to 58 in 4535a21

	minify: {
	compress: true,
	},

Remove it and then it works as expected 🐱

P.S. I don't any reason to have compression enabled as it will be done by Terser anyway later.

[spmonahan]

Thanks! Is this behavior documented anywhere? Are you just familiar enough with SWC to be able to effectively debug it?

[layershifter]

Is this behavior documented anywhere?

Yes, but not really well, https://swc.rs/docs/configuration/minification. Seems that it follows Terser's options that are better documented.

Are you just familiar enough with SWC to be able to effectively debug it?

Nope, I am not familiar with SWC, but it works similarly to Babel/Terser, so I tried to ensure that it's caused by minification and it was 🤔