Блог

Я копирую инструкции из этого файла здесь:

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

Я получаю эту ошибку, когда добавляю next.config.js приведенный ниже код.

 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? }]  -gt; 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? }  -gt; 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? }]  -gt; 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? }]  -gt; 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? }]  -gt; 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) =gt; {  config.resolve.alias = {  ...config.resolve.alias,  '@mui/styled-engine': '@mui/styled-engine-sc',  };  return config;  }, });  

Это происходило потому, что я использовал next@9 более старую версию, исправленную:

yarn add next@latest