Next.js从9升级到11后webpack构建失败报错如何解决？

问题根因 #

你遇到的报错核心是旧版Next.js生态依赖和Next 11内置能力冲突，几个核心不兼容点如下：

• @zeit/next-css、@zeit/next-sass、next-fonts 属于Next.js 10以前的社区插件，早已停止维护，Next.js 10+已经原生内置CSS、Sass、字体/静态资源处理能力，旧插件和内置webpack规则完全冲突
• extract-text-webpack-plugin 是Webpack 3时代的资源提取插件，完全不兼容Webpack 4/5
• 自定义的file-loader规则和Next.js 11内置的Webpack 5 Asset模块静态资源处理逻辑重复，导致资源编译冲突
• 已废弃的node-sass依赖也可能引发编译兼容问题

具体修复步骤 #

第一步：清理不兼容依赖 #

卸载以下依赖包：

npm uninstall @zeit/next-css @zeit/next-sass next-fonts extract-text-webpack-plugin file-loader node-sass
# 或者用yarn
yarn remove @zeit/next-css @zeit/next-sass next-fonts extract-text-webpack-plugin file-loader node-sass

安装官方推荐的sass代替已废弃的node-sass：

npm install sass --save-dev
# 或者用yarn
yarn add sass --dev

删除package.json里的两处webpack相关配置：

• dependencies中的"webpack": "^5.1.3"
• resolutions中的"webpack": "5.41.1"
  （Next.js 11已经内置适配好的Webpack 5版本，不需要自行指定，强制指定反而可能引发兼容问题）

第二步：重写next.config.js #

替换为以下配置，直接使用Next.js内置能力即可：

const withPlugins = require('next-compose-plugins');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.analyze === 'true',
});

const nextConfig = {
  env: {
    search_key: process.env.search_key,
    appDynamicsKey: process.env.appDynamicsKey,
    ENVIRONMENT: process.env.ENVIRONMENT,
  },
  // 原生sass配置
  sassOptions: {
    outputStyle: 'compressed',
  },
  // 静态资源输出规则符合你原有配置，不需要额外加file-loader
  images: {
    domains: [], // 如果有外部图片域名可以在这里添加
  },
  webpack: (webpackConfig) => {
    const { module = {} } = webpackConfig;
    return {
      ...webpackConfig,
      module: {
        ...module,
        rules: [
          ...(module.rules || []),
          // 仅保留需要的spec文件忽略规则即可
          {
            test: /\.spec.jsx$/,
            loader: 'ignore-loader',
          },
        ],
      },
    };
  },
};

module.exports = withPlugins(
  [[withBundleAnalyzer]],
  nextConfig,
);

第三步：清理缓存重新构建 #

删除以下文件/文件夹后重新安装依赖构建：

• 项目根目录的.next文件夹
• node_modules文件夹
• 包管理锁文件：package-lock.json（npm）或yarn.lock（yarn）
  之后执行：

npm install
npm run build
# 或者用yarn
yarn install
yarn build

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