Webpack5+Yarn PnP报Can't resolve 'process/browser'错误如何解决

这个问题和Yarn Workspace配置无关，是Webpack 5与Yarn PnP的规则共同作用导致的：

• Webpack 5默认移除了Node.js核心模块的自动浏览器polyfill逻辑，process这类Node环境内置的变量需要手动引入polyfill才能在浏览器端运行
• Yarn PnP默认开启严格依赖边界校验：第三方依赖只能访问自身package.json中明确声明的依赖，无法越级访问项目根目录安装的包。你配置的ProvidePlugin会在每个出现process引用的文件位置解析process/browser路径，而axios@0.19.2本身没有声明对process包的依赖，PnP会直接拦截解析请求抛出找不到模块的错误。

方案1：补全第三方依赖声明（Yarn官方推荐） #

这是最适配PnP设计逻辑的方案，通过Yarn的packageExtensions配置给缺失依赖声明的axios补上process依赖：

1. 先确保项目根目录已安装process polyfill：
   yarn add -D process
2. 在项目根目录的.yarnrc.yml中添加如下配置：

packageExtensions:
  "axios@0.19.2":
    dependencies:
      process: "*"

3. 执行yarn install重新生成PnP依赖映射表，原有Webpack配置不需要修改即可正常构建。

方案2：配置Webpack强制解析到项目根的polyfill #

如果不想修改Yarn配置，可以通过Webpack的resolve.alias强制所有process/browser的引用都指向项目根安装的polyfill包，绕过PnP的路径查找逻辑：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 其余原有Webpack配置保持不变
  resolve: {
    // 其余原有resolve配置保持不变
    alias: {
      'process/browser': path.resolve(__dirname, './node_modules/process/browser.js'),
    },
  },
  plugins: [
    // 其余原有插件配置保持不变
    new webpack.ProvidePlugin({
      process: 'process/browser'
    }),
  ]
}

方案3：升级axios版本 #

axios@0.19.2是2020年发布的旧版本，后续1.x版本已经修复了浏览器端不必要的process引用问题，直接升级axios到最新稳定版后，不需要额外配置process polyfill即可在Webpack 5 + Yarn PnP环境下正常构建。

如果需要快速绕过校验临时构建，可以修改Webpack的resolve.modules配置，强制所有模块解析优先查找项目根目录的依赖，绕过PnP的依赖边界校验：

resolve: {
  modules: [
    path.resolve(__dirname, 'node_modules'),
    'node_modules'
  ],
  // 其余resolve配置保持不变
}

注意这个方案会破坏PnP的依赖隔离特性，可能引入多版本依赖冲突问题，仅适合临时救急使用，不推荐作为长期方案。

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