[material-ui] Issues with NextJS 14.1

[gilthonweapps]

Steps to reproduce

Link to live example: (CodeSandbox)

Steps:

1. Create a NextJS project with latest version (14.1) and use App Router
2. Install latest version of MUI and use AppRouterCacheProvider and CssVarsProvider
3. Put a <Dialog> component in page.jsx (if you don't put any component, you will have other errors)
4. Run the project

Current behavior

Issues in the console:

Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'useLayoutEffect').

Import trace for requested module:
./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
./node_modules/@mui/base/Unstable_Popup/Popup.js
./node_modules/@mui/base/Unstable_Popup/index.js
./node_modules/@mui/base/index.js
./node_modules/@mui/material/Modal/Modal.js
./node_modules/@mui/material/Modal/index.js
./node_modules/@mui/material/Dialog/Dialog.js
./node_modules/@mui/material/Dialog/index.js
__barrel_optimize__?names=Dialog!=!./node_modules/@mui/material/index.js

Expected behavior

Should run without issue

Context

No response

Your environment

npx @mui/envinfo

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

Search keywords: nextjs app router

[samuelsycamore]

It appears that Floating UI (used internally by the Base UI Popup component) is the source of this error:

./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs

cc: @michaldudak

[michaldudak]

Looks like something is messed up with ESM/CJS imports. I'm not sure on which side, though.

[jrjake]

Appears to be a bug in Next.js, which has apparently been fixed in their 14.1.1 canary vercel/next.js#61185