Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui] Not working correctly with Next.js 'edge' runtime #39338

Closed
DusanStojanovic-gowago opened this issue Oct 7, 2023 · 11 comments · Fixed by #39981
Closed

[material-ui] Not working correctly with Next.js 'edge' runtime #39338

DusanStojanovic-gowago opened this issue Oct 7, 2023 · 11 comments · Fixed by #39981
Assignees
@brijeshb42
Labels
bug 🐛 Something doesn't work nextjs package: material-ui Specific to @mui/material

Comments

@DusanStojanovic-gowago
Copy link

DusanStojanovic-gowago commented Oct 7, 2023 •
edited by oliviertassinari
Loading

Steps to reproduce 🕹

Currently, the material-ui doesn't work correctly with the NextJS edge runtime. There are warnings in a terminal and an error in the HTML.

I created a sample repository here.

Steps:

  1. Create a new Nextjs project: npx create-next-app@latest (I selected the app router and typescript),
  2. Install Material-UI: npm install @mui/material @emotion/react @emotion/styled,
  3. Create a ThemeRegistry.tsx and use it in the app/layout.tsx. I followed the guide here,
  4. Set the edge runtime in the app/layout.tsx: export const runtime = "edge";,
  5. Build the app,
  6. Run the app,
  7. You will see the <html id="__next_error__" error on refresh, and warnings in the terminal: [TypeError: Cannot read properties of undefined (reading 'fontWeightBold')]

Note: the error lasts less than a second, so if you want to see it easier, set the Network to Slow 3G or similar.

Npm packages:

"dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.12",
    "next": "13.5.4",
    "react": "^18",
    "react-dom": "^18",
    "sharp": "^0.32.6"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "typescript": "^5"
  }

Current behavior 😯

When I refresh the page, I see the error on the <html> tag like on the screenshot:
<html id="__next_error__"

Screenshot 2023-10-07 at 17 43 50

I can also see the following warnings in the terminal:

[TypeError: Cannot read properties of undefined (reading 'fontWeightBold')]

Expected behavior 🤔

  • No __next_error__
  • No warnings in the console

Your environment 🌎

npx @mui/envinfo 
System:
    OS: macOS 14.0
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 117.0.5938.149
    Edge: Not Found
    Safari: 17.0
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.18
    @mui/core-downloads-tracker:  5.14.12
    @mui/material: ^5.14.12 => 5.14.12
    @mui/private-theming:  5.14.12
    @mui/styled-engine:  5.14.12
    @mui/system:  5.14.12
    @mui/types:  7.2.5
    @mui/utils:  5.14.12
    @types/react: ^18 => 18.2.25
    react: ^18 => 18.2.0
    react-dom: ^18 => 18.2.0
    typescript: ^5 => 5.2.2

Browser: Chrome
@DusanStojanovic-gowago DusanStojanovic-gowago added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 7, 2023
@oliviertassinari oliviertassinari changed the title Material-UI doesn't work correctly with NextJS 'edge' runtime Material-UI doesn't work correctly with Next.js 'edge' runtime Oct 8, 2023
@brijeshb42 brijeshb42 self-assigned this Oct 10, 2023
@brijeshb42
Copy link
Contributor

I debugged and found that the created theme has theme.typography as undefined and also theme.palette only has {mode: "light"} and no other color palettes resulting in the error.
Addings logs in node_modules files is not logging anything so I am still trying to figure out the root cause. I am guessing there is some API that is not available in edge runtime resulting in the above behaviour.

@zannager zannager added the package: system Specific to @mui/system label Oct 10, 2023
@danilo-leal danilo-leal changed the title Material-UI doesn't work correctly with Next.js 'edge' runtime [material-ui] Not working correctly with Next.js 'edge' runtime Oct 11, 2023
@danilo-leal danilo-leal added package: material-ui Specific to @mui/material and removed package: system Specific to @mui/system status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 11, 2023
@mr-rpl
Copy link

mr-rpl commented Oct 14, 2023

I'd like to add that the <CssBaseline /> component also breaks edge

@stepannemejc
Copy link

I am experiencing similar behaviour, which was caused by switching to edge runtime. I got this error:
TypeError: Cannot read properties of undefined (reading 'background')

Which comes from node_modules/@mui/material/styles/experimental_extendTheme.js (25:0)

@Emily-Thomas
Copy link

+1 on this issue

Getting the following error when adding edge to a SSR page using MUI.

▲  Error: Could not find the module "/node_modules/@mui/material/node/Box/index.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
▲  at ek (/helphub/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:75:12617)
▲  at /node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:75:24092
▲  at Array.toJSON (/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:75:25185)

@DusanStojanovic-gowago
Copy link
Author

Hi @brijeshb42,

Any news on this issue?

Thanks!

@giovannidavi
Copy link

@brijeshb42 @DusanStojanovic-gowago
This is a duplicate of #36574
We would really need a solution for this problem it's currently blocking the use of edge runtime

brijeshb42 added a commit to brijeshb42/material-ui that referenced this issue Nov 24, 2023
@brijeshb42
[utils] Update isPlainObject implementation
0dd31e9 
This update adds support for checking plain object in non-v8/standard
runtimes as well (ie vercel edge-runtime)

Closes mui#36574 mui#39338
@brijeshb42 brijeshb42 mentioned this issue Nov 24, 2023
Merged
brijeshb42 added a commit to brijeshb42/material-ui that referenced this issue Nov 27, 2023
@brijeshb42
[utils] Update isPlainObject implementation
4b68ad9 
This update adds support for checking plain object in non-v8/standard
runtimes as well (ie vercel edge-runtime)

Closes mui#36574 mui#39338
@jordanvector
Copy link

Same issue here also, now our only blocker for moving to edge runtime

@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label Jan 7, 2024
@oliviertassinari oliviertassinari mentioned this issue Jan 8, 2024
Closed
@brijeshb42
Copy link
Contributor

brijeshb42 commented Jan 12, 2024 •
edited by oliviertassinari
Loading

@DusanStojanovic-gowago @jordanvector Could you verify if edge runtime is working with v5.15.4 of @mui/material or more recent?

@DusanStojanovic-gowago
Copy link
Author

@brijeshb42 I confirm the edge runtime is working with the latest version of @mui/material. Thank you!

@jordanvector
Copy link

@brijeshb42 yes I can confirm latest version of @mui/material is working with edge runtime. Great work!

@oliviertassinari

This comment was marked as resolved.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brijeshb42 brijeshb42

Labels
bug 🐛 Something doesn't work nextjs package: material-ui Specific to @mui/material
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[utils] Fix isPlainObject to work across realm brijeshb42/material-ui