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.

@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'

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",

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

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

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.

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

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.

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.

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.

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

@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!

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

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.