MUI 和 Next.JS 的 Webpack 问题

Question

I'm copying the instructions from this file here:

https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-styled-components-typescript/next.config.js

I get this error when I add the next.config.js code below.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].module.rules[1].oneOf[5].include should be one of these:
   RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
   -> One or multiple rule conditions
   Details:
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be an instance of RegExp
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be a string.
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be an instance of function
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be an object.
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be one of these:
      RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }
    * configuration[0].module.rules[1].oneOf[5].include.or[2] should be one of these:
      RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }
      -> A rule condition
 - configuration[1].module.rules[1].oneOf[3].issuer should be one of these:
   RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
   -> One or multiple rule conditions
   Details:
    * configuration[1].module.rules[1].oneOf[2].issuer.or should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration[1].module.rules[1].oneOf[2].issuer.or should be one of these:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
      -> Logical OR
    * configuration[1].module.rules[1].oneOf[3].issuer.or should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration[1].module.rules[1].oneOf[3].issuer.or should be one of these:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
      -> Logical OR
    at webpack (/Users/thomasreggi/Desktop/project-template/node_modules/next/node_modules/webpack/lib/webpack.js:31:9)
    at HotReloader.start (/Users/thomasreggi/Desktop/project-template/node_modules/next/dist/server/hot-reloader.js:14:1858)
    at async DevServer.prepare (/Users/thomasreggi/Desktop/project-template/node_modules/next/dist/server/next-dev-server.js:10:1565)
    at async /Users/thomasreggi/Desktop/project-template/node_modules/next/dist/cli/next-dev.js:21:359
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

const withTM = require('next-transpile-modules')(['@mui/material', '@mui/system']); // pass the modules you would like to see transpiled

module.exports = withTM({
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@mui/styled-engine': '@mui/styled-engine-sc',
    };
    return config;
  },
});

Answer 1

This was happening because I was using next@9 an older version, fixed by:

yarn add next@latest