NextJS 11.1.2部署Netlify出现pnpapi、webpack版本相关错误如何解决

排查步骤 #

1. 对齐本地与Netlify的构建环境

• 确认本地Node.js版本，在Netlify环境变量中设置NODE_VERSION与本地完全一致，Next.js 11.1.2仅适配12.x、14.x、16.x版本的Node.js，不要使用18及以上的高版本。
• 确保本地的包管理器锁文件（package-lock.json对应npm，yarn.lock对应Yarn）已上传到代码仓库，避免Netlify安装依赖时版本浮动。若未使用Yarn的PnP功能，删除项目根目录下的.yarnrc、.pnp.cjs等PnP相关配置文件，也可以将Netlify构建命令修改为npm ci && npm run build，强制用npm按锁文件安装依赖，避免包管理器自动识别错误。

注：Webpack4报错中提到的pnpapi是Yarn PnP（即插即用）功能的核心模块，未开启PnP时出现该报错，本质是包管理器识别异常导致依赖安装错误。

2. 修复Webpack5编译配置

Webpack5的LICENSE文件解析报错，是因为编译规则错误匹配了node_modules内的非代码文件，先执行npm i ignore-loader -D安装忽略加载器，再修改next.config.js如下：

module.exports = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  webpack: (config) => {
    // 忽略所有LICENSE文件的编译
    config.module.rules.push({
      test: /LICENSE$/,
      use: 'ignore-loader',
    });
    // 排除@vercel/nft目录的额外编译
    config.module.rules.forEach(rule => {
      if (rule.test.toString().match(/(js|ts|jsx|tsx)/)) {
        rule.exclude = rule.exclude || [];
        rule.exclude.push(/node_modules\/@vercel\/nft/);
      }
    });
    return config;
  }
};

3. 清理构建缓存

进入Netlify项目后台，点击「Trigger deploy」选择「Clear cache and deploy site」，清除历史构建缓存后重新部署，避免旧依赖缓存引发问题。

4. 排查第三方依赖兼容

你使用的minimal-kit模板自带预设依赖与配置，检查项目是否额外安装了webpack相关的loader、plugin，确认其版本与Next.js 11.1.2自带的Webpack5版本兼容。也可以删除本地的node_modules文件夹和锁文件，重新执行npm install后本地构建测试，确认是否能复现问题，再针对性调试。

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