mui · Janpot · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 9, 2025
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -508,6 +508,13 @@ module.exports = /** @type {Config} */ ({
         'import/extensions': ['error', 'ignorePackages'],
       },
     },
+    {
+      files: ['test/bundling/fixtures/**/*.?(c|m)[jt]s?(x)'],
+      rules: {
+        'react/prop-types': 'off',
+        'import/no-unresolved': 'off',
+      },
+    },
     {
       files: ['**/*.mjs'],
       rules: {

diff --git a/scripts/releasePack.mts b/scripts/releasePack.mts
@@ -24,11 +24,12 @@ interface RunOptions {
 
 async function packWorkspace(workspace: WorkspaceDefinition, outDir: string): Promise<string> {
   const packages: Record<string, string> = {};
-  const { stdout: zipFilePath } = await $({
+  const { stdout } = await $({
     cwd: workspace.path,
-  })`pnpm pack --pack-destination ${outDir}`;
-  packages[workspace.name] = zipFilePath;
-  return zipFilePath;
+  })`pnpm pack --json --pack-destination ${outDir}`;
+  const result = JSON.parse(stdout);
+  packages[workspace.name] = result.filename;
+  return result.filename;
 }
 
 async function run({ packages, outDir, concurrency }: RunOptions) {

diff --git a/test/bundling/fixtures/next-webpack4/package.json b/test/bundling/fixtures/next-webpack4/package.json
@@ -18,9 +18,9 @@
     "@mui/system": "workspace:*",
     "@mui/utils": "workspace:*",
     "next": "14.2.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0"
   },
   "devDependencies": {
     "concurrently": "7.4.0",

diff --git a/test/bundling/fixtures/next-webpack5/package.json b/test/bundling/fixtures/next-webpack5/package.json
@@ -7,16 +7,18 @@
   },
   "dependencies": {
     "@emotion/core": "11.0.0",
-    "@emotion/react": "11.10.4",
-    "@emotion/styled": "11.10.4",
+    "@emotion/react": "11.14.0",
+    "@emotion/server": "11.11.0",
+    "@emotion/styled": "11.14.0",
     "@mui/material": "workspace:*",
+    "@mui/material-nextjs": "workspace:*",
     "@mui/icons-material": "workspace:*",
     "@mui/lab": "workspace:*",
     "@mui/styled-engine": "workspace:*",
     "@mui/styles": "workspace:*",
     "@mui/system": "workspace:*",
     "@mui/utils": "workspace:*",
-    "next": "14.2.21",
+    "next": "15.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-is": "18.2.0"
@@ -29,6 +31,7 @@
     "overrides": {
       "@mui/base": "file:../../../../packed/@mui/base.tgz",
       "@mui/material": "file:../../../../packed/@mui/material.tgz",
+      "@mui/material-nextjs": "file:../../../../packed/@mui/material-nextjs.tgz",
       "@mui/icons-material": "file:../../../../packed/@mui/icons-material.tgz",
       "@mui/lab": "file:../../../../packed/@mui/lab.tgz",
       "@mui/styled-engine": "file:../../../../packed/@mui/styled-engine.tgz",

diff --git a/test/bundling/fixtures/next-webpack5/pages/_app.js b/test/bundling/fixtures/next-webpack5/pages/_app.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from '../src/theme';
+
+export default function MyApp(props) {
+  const { Component, pageProps } = props;
+
+  return (
+    <AppCacheProvider {...props}>
+      <Head>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </AppCacheProvider>
+  );
+}
diff --git a/test/bundling/fixtures/next-webpack5/pages/_document.js b/test/bundling/fixtures/next-webpack5/pages/_document.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Html, Head, Main, NextScript } from 'next/document';
+import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v15-pagesRouter';
+import theme from '../src/theme';
+
+export default function MyDocument(props) {
+  return (
+    <Html lang="en">
+      <Head>
+        {/* PWA primary color */}
+        <meta name="theme-color" content={theme.palette.primary.main} />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <meta name="emotion-insertion-point" content="" />
+        <DocumentHeadTags {...props} />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+
+MyDocument.getInitialProps = async (ctx) => {
+  const finalProps = await documentGetInitialProps(ctx);
+  return finalProps;
+};
diff --git a/test/bundling/fixtures/next-webpack5/src/theme.js b/test/bundling/fixtures/next-webpack5/src/theme.js
@@ -0,0 +1,30 @@
+import { Roboto } from 'next/font/google';
+import { createTheme } from '@mui/material/styles';
+import { red } from '@mui/material/colors';
+
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+// Create a theme instance.
+const theme = createTheme({
+  cssVariables: true,
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
+});
+
+export default theme;