[system] Missing dependency on @babel/runtime in Next.js App Router integration

[dtrunk90]

Related page

https://mui.com/material-ui/integrations/nextjs/#app-router

Kind of issue

Missing information

Issue description

Error message:

 ⨯ .yarn/__virtual__/@mui-material-nextjs-virtual-d9eb2b180d/4/.yarn/berry/cache/@mui-material-nextjs-npm-5.15.9-79b61fad5f-10c0.zip/node_modules/@mui/material-nextjs/v13-appRouter/appRouterV13.js:3:0
Module not found: Can't resolve '@babel/runtime/helpers/esm/extends'

Context

First I've created a simple Next.js app: yarn create next-app@latest.
Then I've installed Material UI like described here: https://mui.com/material-ui/getting-started/installation/#default-installation
And then I've followed the steps here: https://mui.com/material-ui/integrations/nextjs/#app-router (only installing and configuration).
Once I've added <AppRouterCacheProvider> it fails to build with the given error message.

I'm not sure why it's missing @babel/runtime because I would expect to install dependencies automatically if they're required.
Do we have to add it manually? There's no information about babel on both of the pages.

$ ls ~/.yarn/berry/cache | grep babel
@babel-code-frame-npm-7.23.5-cb10d08de6-10c0.zip
@babel-helper-module-imports-npm-7.22.15-687e77ee50-10c0.zip
@babel-helper-string-parser-npm-7.23.4-b1f0d030c3-10c0.zip
@babel-helper-validator-identifier-npm-7.22.20-18305bb306-10c0.zip
@babel-highlight-npm-7.23.4-2a9f2d2538-10c0.zip
babel-plugin-macros-npm-3.1.0-320e781f4e-10c0.zip
@babel-runtime-npm-7.23.9-3b96e23cc2-10c0.zip
@babel-types-npm-7.23.9-c32aeb5f36-10c0.zip
@emotion-babel-plugin-npm-11.11.0-c1dcc4c884-10c0.zip

yarn add @babel/runtime resolved the issue but I'm not sure if this is a valid solution.

Search keywords: babel

[oliviertassinari]

@siriwatknp The dependency list of https://www.npmjs.com/package/@mui/material-nextjs is broken.

We do https://unpkg.com/browse/@mui/material-nextjs@5.15.9/v13-appRouter/appRouterV13.js but we don't have @babel/runtime in https://unpkg.com/browse/@mui/material-nextjs@5.15.9/package.json like for the other packages. The solution seems to add it.

[siriwatknp]

PR open.

[siriwatknp]

@oliviertassinari Why would you change the title to [system]? Should it be [material-ui-nextjs] or [material-nextjs]?

[oliviertassinari]

Why would you change the title to [system]?

@siriwatknp Because to me today, this package is about MUI System, I see nothing in material-ui-nextjs (https://unpkg.com/browse/@mui/material-nextjs@5.15.9/) that is about Material UI yet (the same logic would work with Joy UI, another way to see it: we would use Tailwind CSS stuff for the Next.js integration if Material UI was built with Tailwind CSS).

Otherwise, [material-ui] would be the second closest primary tag IMHO.