Using Nextjs 13 App Router with MUI 5. While setting up, followed these instructions carefully: https://mui.com/material-ui/guides/next-js-app-router/. My code looks much like this example: https://github.com/mui/material-ui/blob/31e2f14f19ac24959103f1d9ca76a26c4f7cb8fd/examples/material-ui-nextjs/README.md. But when I try to launch my app and navigate to the home page, I get the following error trace:
frontend_1 | - event compiled client and server successfully in 259 ms (20 modules)
frontend_1 | - wait compiling /page (client and server)...
frontend_1 | - wait compiling /_error (client and server)...
frontend_1 | - warn ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.esm.js
frontend_1 | Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'React').
frontend_1 |
frontend_1 | Import trace for requested module:
frontend_1 | ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.esm.js
frontend_1 | ./node_modules/@emotion/styled/dist/emotion-styled.esm.js
frontend_1 | ./node_modules/@mui/styled-engine/node/index.js
frontend_1 | ./node_modules/@mui/system/index.js
frontend_1 | ./node_modules/@mui/material/node/styles/index.js
frontend_1 | ./node_modules/@mui/material/node/index.js
frontend_1 | ./app/page.tsx
frontend_1 | - error node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js (20:47) @ createContext
frontend_1 | - error createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:19:49)
frontend_1 | at (sc_server)/./node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js (/app/.next/server/app/page.js:3896:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/react/dist/emotion-react.cjs.dev.js:7:22)
frontend_1 | at (sc_server)/./node_modules/@emotion/react/dist/emotion-react.cjs.dev.js (/app/.next/server/app/page.js:3907:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js:8:72)
frontend_1 | at (sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js (/app/.next/server/app/page.js:3973:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js:5:95) {
frontend_1 | name: 'TypeError',
frontend_1 | digest: undefined
frontend_1 | }
frontend_1 | null
frontend_1 | - error node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js (20:47) @ createContext
frontend_1 | - error createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:19:49)
frontend_1 | at (sc_server)/./node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js (/app/.next/server/app/page.js:3896:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/react/dist/emotion-react.cjs.dev.js:7:22)
frontend_1 | at (sc_server)/./node_modules/@emotion/react/dist/emotion-react.cjs.dev.js (/app/.next/server/app/page.js:3907:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js:8:72)
frontend_1 | at (sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js (/app/.next/server/app/page.js:3973:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js:5:95) {
frontend_1 | name: 'TypeError',
frontend_1 | digest: undefined
frontend_1 | }
frontend_1 | null
frontend_1 | - error node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js (20:47) @ createContext
frontend_1 | - error createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:19:49)
frontend_1 | at (sc_server)/./node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js (/app/.next/server/app/page.js:3896:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/react/dist/emotion-react.cjs.dev.js:7:22)
frontend_1 | at (sc_server)/./node_modules/@emotion/react/dist/emotion-react.cjs.dev.js (/app/.next/server/app/page.js:3907:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js:8:72)
frontend_1 | at (sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js (/app/.next/server/app/page.js:3973:1)
frontend_1 | at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:42)
frontend_1 | at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js:5:95) {
frontend_1 | name: 'TypeError',
frontend_1 | digest: undefined
frontend_1 | }
frontend_1 | null
I don't think there's a single MUI component in my code that's not also featured in that example. It looks like the main error here is the client component issue but I can't see which of my components requires that directive - they all look like the components in that example code, i.e. all serializable props, no useState etc. I can share snippets if it helps. Has anyone run into a similar roadblock? I'm pretty confused right now.
