search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.38k stars 32.14k forks source link

Can't integrate latest next.js with pages router with MUI #43267

Open zbycz opened 1 month ago

zbycz commented 1 month ago

Related page

https://mui.com/material-ui/integrations/nextjs/

Kind of issue

Broken demo

Issue description

Run yarn create next-app Follow demo. Observe this error:

❯ node -v
v20.16.0

❯ yarn next dev
  ▲ Next.js 14.2.5
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.4s
 ○ Compiling / ...
 ⨯ ./node_modules/@mui/material-nextjs/v13-pagesRouter/pagesRouterV13App.js:2:1
Module not found: Can't resolve '@emotion/react'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mui/material-nextjs/v13-pagesRouter/index.js
./src/pages/_app.tsx

Also the _app.tsx file looks very different. It should be updated to latest next.js template.

Context

Install latest next.js with pages router and use MUI.

Search keywords: next.js with pages router, MUI

DiegoAndai commented 3 weeks ago

Hey @zbycz, did you check this comment? https://github.com/mui/material-ui/issues/40798#issuecomment-1977357094 Does this solve your issue?