Error: "export 'useId' (imported as 'React') was not found in 'react'" after upgrading to v5.2.0

[sachinahya]

Current behavior 😯

Building a project on React 17 throws the following errors when running build.

@mui/material: v5.2.0
webpack: 5.64.2
react: 17.0.2

EDIT: Seems to be related to a change in @mui/utils where an attempt is made to check for the existence of useId in react: 3323b23#diff-41d8fb02706e8d95b775dfa0caadade00dbbcb017d7f2c7acbc3100c5a02d46f

Expected behavior 🤔

Build should work on React 17 as v5.2.0 is a minor release and React 18, which includes these imports, is not yet released.

Steps to reproduce 🕹

Steps:

1. Clone the following repo: https://github.com/sachinahya/mui-5.2.0-build-error
2. Run yarn build.

To reproduce working example:

1. Change version of @mui/material in package.json to ~5.1.0.
2. Add the following resolutions to package.json:

"resolutions": {
  "@mui/utils": "~5.1.0"
},

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[danielpngr]

i got exactly the same warning...

[HossamHoussien]

I can reproduce this issue also with the following versions:
"@mui/lab": "^5.0.0-alpha.56",
"@mui/material": "^5.0.6",
"react": "^17.0.2",
"webpack": "5.62.1"

[LuigiMaestrelli]

Me too, and also this import:

./node_modules/@mui/material/useMediaQuery/useMediaQuery.js
Attempted import error: 'useSyncExternalStore' is not exported from 'react' (imported as 'React').

I'm using with nextjs 12.0.4

[solarmosaic-colin-young]

So, this is pretty hacky, but you should be able to resolve this temporarily/quickly while we're still waiting for this by:

1. Hardcoding @mui/material (and all its dependencies - I had to add all of the below in my package.json's dependencies:

"@mui/icons-material": "5.1.1",
"@mui/material": "5.1.1",
"@mui/utils": "5.1.1",
"@mui/private-theming": "5.1.1",
"@mui/styled-engine": "5.1.1",
"@mui/system": "5.1.1",

2. Using something like force-resolutions and adding this to package.json:

"resolutions": {
  "@mui/utils": "5.1.1",
  "@mui/material": "5.1.1",
}

[kevin-dev725]

@solarmosaic-colin-young That works for me! I noticed it would be solved we pinned the version down to 5.1.1 but I was struggling with how to solve it. ^5.x.x forced me to install the latest one 5.2.0 which caused the warnings.
Thank you!

[eps1lon]

The compilation is still successful or does it actually prevent building?

[EdanKriss]

Any word on the cause? Is 5.2.0 version broken for everyone?

I am experiencing this as the only issue migrating an MUI v4 app to v5, however a solution like force-resolutions isn't really recommended/feasible for me, and following step '1' from solarmosaic-colin-young's post doesn't remove the error because both versions 5.1.1 and 5.2.0 are ultimately used.

[benneq]

@eps1lon For me it's just a warning. But there's more than the one mentioned here:

WARNING in ../node_modules/@mui/material/useMediaQuery/useMediaQuery.js 78:16-42
export 'useSyncExternalStore' (imported as 'React') was not found in 'react'

WARNING in ../node_modules/@mui/material/useMediaQuery/useMediaQuery.js 109:38-64
export 'useSyncExternalStore' (imported as 'React') was not found in 'react'

WARNING in ../node_modules/@mui/utils/esm/useId.js 26:6-17
export 'useId' (imported as 'React') was not found in 'react'

WARNING in ../node_modules/@mui/utils/esm/useId.js 27:20-31
export 'useId' (imported as 'React') was not found in 'react'

[eps1lon]

A warning is certainly annoying though it makes sense that you get one for useSyncExternalStore and useId.

Trying to understand if we actually get a crash just for useId.

Will look at bundlers what the recommended approach is. I don't think they expect that a package should only support a single major version of a peer dependency.

[eps1lon]

@sachinahya You have strictExportPresence: true in your webpack config. This seems safe to disable in this case.

[eps1lon]

Upstream issue: webpack/webpack#14814

Will revert the changes since they're not required for experimenting with React 18. But we need to revisit our React 17/18 compat strategy soon.

[sachinahya]

Setting strictExportPresence: false works around the issue - I think create-react-app had that set as a default as I didn't change that line when ejecting.

[Aid19801]

Also experiencing this on a new application. Same versions as previous app however (but prev app works fine, weird).

Versions

    "@mui/material": "^5.0.1",
    "@mui/styles": "^5.0.1",
    "@mui/system": "^5.0.1",
     "react": "^17.0.2",
    "react-dom": "^17.0.2",

Warnings are..

WARNING in ./node_modules/@mui/material/useMediaQuery/useMediaQuery.js 109:38-64
export 'useSyncExternalStore' (imported as 'React') was not found in 'react'
...
WARNING in ./node_modules/@mui/utils/esm/useId.js 27:20-31
export 'useId' (imported as 'React') was not found in 'react'

And they generate a full screen overlay with webpack, which i've had to disable.

strictExportPresence: false in webpack config.module doesnt seem to do much for me.

[eps1lon]

I would appreciate it, if people would upvote the upstream issue instead. Without a resolution from Webpack you will always get these warnings once React 18 is released and you're still using React 17. I don't think this is a reasonable expectation for libraries imposed by bundlers.

We'll revert the responsible changes in the meantime. But once React 18 is released, you'll encounter this issue again.

[indykish]

Fix

strictExportPresence: false

Solves this.

Pinning version in resolution as suggested by @solarmosaic-colin-young didn't work for us.

Are there any better ideas?

[forgo]

Fix

strictExportPresence: false

Solves this.

Pinning version in resolution as suggested by @solarmosaic-colin-young didn't work for us.

Are there any better ideas?

I had the opposite experience.

[MateuszDev96]

Fix

strictExportPresence: false

Solves this.

Pinning version in resolution as suggested by @solarmosaic-colin-young didn't work for us.

Are there any better ideas?

I still got an error ... trying with disable esmodules in babel

[songhobby]

I have this as warning when running nextjs production build. The dynamic style is not applied correctly in the production build but dev build works fine. I'm using latest mui, nextjs, styled-components

[enigma1]

strictExportPresence: false only makes it a "warning". The problem persists. And the overlay generated in webpack with the warnings seems to be causing other issues with code updates.

[nurulakbaral]

Please helppp meee :(

[SindreMA]

A way to bypass the warning is to start webpack with --no-client-overlay-warnings, until a fix is released.
The warning is still there in console, but at least you don't have to click the close icon up in right every time it reloads.

[eps1lon]

Should be fixed in 5.2.1. Make sure you have @mui/material@^5.2.1 and @mui/utils@^5.2.1 in your dependency tree.

[abdul-Tz-prog]

@eps1lon I have updated my package.json file but even then getting the same Warning. "export 'useId' (imported as 'React') was not found in 'react' ".

[eps1lon]

@eps1lon I have updated my package.json file but even then getting the same Warning. "export 'useId' (imported as 'React') was not found in 'react' ".

@abdul-Tz-prog Did you also run npm install or yarn install? It's important that older dependencies are nowhere found in your dependency tree.

What does npm ls @mui/utils or yarn why @mui/utils say?

[abdul-Tz-prog]

@eps1lon I have tried npm install and also recreated my package-lock.json file. But getting the same warnings. I did not find any old dependency in the dependency tree. I am unable to install @mui/uitils. It says:

"npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@mui%2fuitils - Not found
"

[eps1lon]

@eps1lon I have tried npm install and also recreated my package-lock.json file. But getting the same warnings. I did not find any old dependency in the dependency tree. I am unable to install @mui/uitils. It says:

"npm ERR! code E404 npm ERR! 404 Not Found - GET registry.npmjs.org/@mui%2fuitils - Not found "

@abdul-Tz-prog Sorry @mui/uitils was a typo on my side. You shouldn't need to explicitly install it if you didn't before.

What does npm ls @mui/utils or yarn why @mui/utils say?

[lgberro]

5.2.1 made my day, solved all those annoying warnings, thanks @eps1lon!

[EdanKriss]

@mui/material 5.2.1 solved the issue for me. Very prompt resolution!

[zigang93]

./node_modules/@mui/x-data-grid/node_modules/@mui/utils/esm/useId.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'React').

Look like @mui/x-data-grid still have same problem..
version: ^5.0.1

I am using the next.js
the warn only show up when I run yarn build

[ViduraAdikari]

Had the same error for my own npm component library created using mui v5.
changing mui, emotion versions didn't help.

this was the rollup.config.ts before:

{
    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$/],
},

following changes in rollup.config.ts solved it:

Fix

New rollup.config.ts that uses only cjs
check rollup output formats here

{
   ...
    output: [
        {
            file: pkg.main,
            format: "cjs",
            sourcemap: true,
        },
    ],
    plugins: [ //plugins here ],
},
{
    input: "dist/types/index.d.ts",
    output: [{file: "dist/index.d.ts", format: "esm"}],
    ...
},

Sample repositories:
component library
consumer of the library

[phaybein]

I know this is closed but thought this might help someone...

• We were using "@mui/x-data-grid-pro": "^4.0.2", in our package.json with "react": "^18.2.0", and "react-dom": "^18.2.0",
• We did the following to clear the dispatcher.useSyncExternalStore and useId error
• ff npm install @mui/material@5.1.1 @mui/utils@5.1.1

[shubham-sharma-2001]

Should be fixed in 5.2.1. Make sure you have @mui/material@^5.2.1 and @mui/utils@^5.2.1 in your dependency tree.

how to add above those in dependency directly or it require any installation through npm/yarn

[monika-w-capillary]

I am facing this issue Attempted import error: 'useSyncExternalStore' is not exported from 'react' (imported as 'React2') in react 16.13. But not able to figureout from where it is getting.