React Rewired应用引入@sentry库出现URL导入错误如何修复

报错根因 #

三个报错来自两个核心问题：

• 浏览器端React代码错误引入了Node.js专用的@sentry/node包，该包依赖Node原生url模块的URL导出，不适用于浏览器环境
• webpack 5 不再自动注入Node.js核心模块的polyfill，现有config-overrides.js配置未处理url模块的兼容，且未阻断Node专用模块被前端打包

分步修复 #

1. 替换前端场景的Sentry依赖 #

@sentry/node是服务端专用包，前端React项目需要使用对应浏览器端的Sentry包，先执行命令替换依赖：

# 卸载Node端Sentry包
npm uninstall @sentry/node
# 安装React端专用Sentry包
npm install @sentry/react

如果使用yarn，执行对应命令即可：

yarn remove @sentry/node
yarn add @sentry/react

依赖替换完成后，全局检索项目代码，把所有from '@sentry/node'的导入语句全部替换为from '@sentry/react'，Sentry初始化逻辑也对应换成React端的初始化方式，不要调用Node专属的API。

2. 补全webpack兼容配置（依赖替换后仍有报错时执行） #

如果替换依赖后仍有同类报错，说明存在第三方间接依赖仍引用Node的url模块，先安装url的浏览器polyfill：

npm install url

然后修改config-overrides.js配置，补充url模块的fallback和全局注入：

/* eslint-disable node/no-extraneous-require */
/* eslint-disable node/no-unpublished-require */
const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    path: false,
    domain: false,
    console: false,
    zlib: false,
    crypto: false,
    stream: false,
    assert: false,
    http: false,
    https: false,
    os: false,
    constants: false,
    vm: false,
    fs: false,
    module: false,
    child_process: false,
    net: false,
    repl: false,
    async_hooks: false,
    tls: false,
    perf_hooks: false,
    util: false,
    // 新增url模块polyfill
    url: require.resolve("url/"),
  });
  config.resolve.fallback = fallback;

  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
      // 全局注入URL构造函数，兼容旧代码的引用方式
      URL: ["url", "URL"],
    }),
  ]);
  return config;
};

3. 目录隔离避免Node代码被打包 #

Web3+Hardhat项目要注意目录拆分：Hardhat合约部署、脚本测试的代码运行在Node环境，可以保留@sentry/node依赖，但这部分代码必须放在前端src目录外，不要被webpack的编译逻辑扫到，否则会持续出现Node专用模块被打包到浏览器端的问题。

改完配置后删除node_modules/.cache缓存目录，重启开发服务重新编译即可解决报错。

内容的提问来源于stack exchange，提问作者Raül