Can't build a simple CRA app with v11.8.0

[ddolcimascolo]

Current behavior:

A build of a CRA app with React 17, MUI 5 (thus requiring emotion) fails quickly with:

Creating an optimized production build...
Failed to compile.
Attempted import error: 'useInsertionEffect' is not exported from 'react' (imported as 'useInsertionEffect$1').

This looks like the lib erroneously try to require something that's only available in React 18, while my app uses React 17.

To reproduce:

I can build a CSB if you feel it's better, but really the steps are:

1. Create a new CRA
2. Add MUI 5 and emotion
3. Setup MUI, Use a MUI component
4. npm run build

Expected behavior:

Build succeeds

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.8.0

[Andarist]

Thanks for the report - I will check this out asap

[ddolcimascolo]

Hi there,

I'm willing to help 🙂 Feel free to ask.
The error was caught by our CI during an upgrade of emotion (through Renovate bot, for what it's worth) and I'm in no rush to get a fix, especially if this might be due to another thing on my side. What I can tell is v11.7.1 works just fine

Cheers,
David

[0xD4n]

confirmed, an easy way to re-produce is to use a 'Container' from mui.

import Container from "@mui/material/Container";

function App() {
  return <Container>Hello, World!</Container>;
}

export default App;

error

Failed to compile.

Attempted import error: 'useInsertionEffect' is not exported from 'react' (imported as 'useInsertionEffect$1').
assets by path static/js/*.js 1.85 MiB
  asset static/js/bundle.js 1.84 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.92 KiB [emitted] 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 458 bytes [emitted]
cached modules 2.02 MiB (javascript) 31.3 KiB (runtime) [cached] 433 modules

ERROR in ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js 95:25-45
export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
 @ ./node_modules/@mui/styled-engine/index.js 30:0-62 30:0-62 30:0-62 30:0-62
 @ ./node_modules/@mui/system/esm/index.js 1:0-88 1:0-88 1:0-88 1:0-88 1:0-88
 @ ./node_modules/@mui/material/styles/useThemeProps.js 1:0-67 8:9-28
 @ ./node_modules/@mui/material/Container/Container.js 8:0-52 87:16-29
 @ ./node_modules/@mui/material/Container/index.js 1:0-38 1:0-38
 @ ./src/App.js 4:0-48 8:30-39
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js 95:48-68
export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
 @ ./node_modules/@mui/styled-engine/index.js 30:0-62 30:0-62 30:0-62 30:0-62
 @ ./node_modules/@mui/system/esm/index.js 1:0-88 1:0-88 1:0-88 1:0-88 1:0-88
 @ ./node_modules/@mui/material/styles/useThemeProps.js 1:0-67 8:9-28
 @ ./node_modules/@mui/material/Container/Container.js 8:0-52 87:16-29
 @ ./node_modules/@mui/material/Container/index.js 1:0-38 1:0-38
 @ ./src/App.js 4:0-48 8:30-39
 @ ./src/index.js 7:0-24 11:33-36

webpack 5.69.1 compiled with 2 errors in 569 ms

[BenJenkinson]

Confirmed here too, I've also just hit this error after upgrading @emotion/react from 11.7.1 to 11.8.0

Error:

ERROR in ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js 95:48-68
export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' (possible exports: ...)

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.8.0

[jeroenvandiepen]

Confirmed here too, I'm also having trouble upgrading from 11.7.1 to 11.8.0.

[ysuzuki19]

I faced same issue.

I solve it via following command.

$ npm i react@beta react-dom@beta

by this command, react@18 is installed. and its exported useInsertionEffect

[Andarist]

I've created a fix here and verified that it should work with CRA. I'm waiting for the CI and stuff but I should be able to release this somewhat soon.

[ahmedkhan847]

I am also facing the same issue

[hatton]

To save anyone else time... Andarist 's fix is no longer in place, and the error is back. The changlelog now says

11.10.4

Patch Changes

• #2867 89b6dbb3 Thanks @Andarist! - Externalized code referencing React.useInsertionEffect to a separate @emotion/use-insertion-effect-with-fallbacks package. This package should be used in your defined externals if you bundle Emotion for whatever reason. It references useInsertionEffect in a very specific way that allows us to use it conditionally. However, if the code consuming Emotion is bundled as a library with Emotion in it then some bundlers might change the way in which we reference useInsertionEffect and that might create problems for bundlers used to consume the said library code. By externalizing this new package you can still bundle Emotion if you want to without running into this problem as you won't "destroy" the carefully crafted reference to useInsertionEffect in the process.

  Note that we don't recommend bundling Emotion. You should have very specific reasons to do so.

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[hatton]

Sure, I could demonstrate the problem if there is interest in fixing it. But what I'm seeing is exactly what the Changelog entry says to expect. In my case, our library (configr-) uses emotion as a peer dependency and is bundled with vite. When our app, using only React 17, consumes the config-r library with webpack, we get 263 lines of warnings for React.useInsertionEffect and React.useId. Let me know if you think it's worth creating a new issue for that. Thanks!

[Andarist]

You might be specifying Emotion as a peer in package.json but this has no effect on your bundling situation. You should add Emotion libs to this external setting:
https://github.com/sillsdev/config-r/blob/068226fd3b29bdb418550b7b08e497beaaa3c507/vite.config.ts#L33

If you actually want to bundle Emotion then:

1. remove peer on it as it's useless anyway
2. add @emotion/use-insertion-effect-with-fallbacks as a dependency and add that as an external