Next.js搭配MUI+styled-components配置next.config.js触发Webpack校验错误

问题根因 #

该Webpack配置校验错误由next-transpile-modules第三方包与v12.2及以上版本的Next.js不兼容导致。高版本Next.js已原生支持模块转译能力，无需额外引入该第三方包，旧包的逻辑修改了Webpack配置结构，不符合新版Webpack的schema校验规则。

解决步骤 #

• 第一步：卸载冗余依赖
  移除项目中安装的next-transpile-modules包：

# npm 执行
npm uninstall next-transpile-modules

# yarn 执行
yarn remove next-transpile-modules

• 第二步：修改next.config.js配置
  使用Next.js原生的transpilePackages配置替代旧的withTM逻辑，修改后完整配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['@mui/material', '@mui/system'],
  compiler: {
    // 开启Next.js内置的styled-components编译支持，无需额外配置babel插件
    styledComponents: true
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@mui/styled-engine': '@mui/styled-engine-sc',
    };
    return config;
  },
};

module.exports = nextConfig;

• 第三步：检查必要依赖安装
  确认项目已安装styled-components对应的MUI适配包，缺少的话执行安装：

# npm 执行
npm install @mui/styled-engine-sc styled-components

# yarn 执行
yarn add @mui/styled-engine-sc styled-components

修改完成后删除项目根目录的.next缓存文件夹，重启开发服务即可解决报错。

内容的提问来源于stack exchange，提问作者ThomasReggi