Material ui export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' using Appbar component

Question

1: https://i.stack.imgur.com/Y2Zdo.png**strong text**

here i am trying to use Appbar component of material ui but i get this error

Answer 1

This was a bug that was caused by useInsertionEffect being referenced directly in the specifiers list of the import statement (React.useInsertionEffect instead of React['useInsertion' + 'Effect']).

It is fixed as of @emotion/react@11.8.1 - upgrade to that version, and the error should disappear.

Answer 2

npm install @mui/material@5.4.2 @emotion/react@11.7.1 @emotion/styled@11.6.0 solves everything...

Answer 3

I got a similar error, but not with Appbar. I was trying to create my own npm component library with mui v5 components.

ERROR in ./node_modules/comp-lib-mui5-sample/dist/esm/index.js 1293:9-29

export 'useInsertionEffect' (imported as 'e') 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)

Downgrading or upgrading material and emotion, styled did not work.

In my rollup.config.js I had:

{
    input: "src/index.ts",
    output: [
        {
            file: pkg.main,
            format: "cjs",
            sourcemap: true,
        },
        {
           file: pkg.module,
           format: "esm",
           sourcemap: true,
         },
    ],
    plugins: [ //plugins here ],
},
{
    input: "dist/esm/types/index.d.ts",
    output: [{file: "dist/index.d.ts", format: "esm"}],
    plugins: [dts()],
    external: [/\.css$/],
},

esm - esm output is used for building for <script type=module> tag in modern browsers.
cjs – CommonJS, suitable for Node and other bundlers rollup output formats

Fix

New rollup.config.ts that uses only cjs:

{
   ...
    output: [
        {
            file: pkg.main,
            format: "cjs",
            sourcemap: true,
        },
        // REMOVED esm from here
    ],
    plugins: [ //plugins here ],
},
{
    input: "dist/types/index.d.ts", // CHANGED <--dist/esm/types/library.d.ts
    output: [{file: "dist/index.d.ts", format: "esm"}],
    plugins: [dts()],
    external: [/\.css$/],
},

(works with "@emotion/react": "^11.8.2", "@emotion/styled": "^11.8.1", "@mui/material": "^5.5.2")

Sample repositories:
component library Git repo
consumer of the library Git repo
(check README.md for more info.)

Answer 4

It's possible that there is an error in the latest version of @emotion/react, 11.8.0. It was released 3h ago which would explain why it stopped working all of a sudden.

As a workaround, install the older version @emotion/react@11.7.1 to fix the problems.

Answer 5

This issue for other components in mui lib too, you can downgrade emotion/react to 11.7.1 till it's fixed

Answer 6

In my case the issue was that my component library, built on top of @mui was using react 18, while the consuming application was using v17. Using an older version of @emotion/react and @emotion/styled like @Savchyk Vladyslav suggested was fixing the issue, but looking through Github issue of @emotion I couldn't find a single report about this particular error which led me to believe the issue was most likely on my end.

Downgrading my library's react version to v17, and updating @emotion/react@11.11.1 and @emotion/styled@11.11.0 fixed the issue and now I'm on the latest and greatest :)

Answer 7

Same happen for me! Downgrading to 11.7.1 fixed!