React 16引入@Sentry/react报错：Module parse failed，求解决方案

问题根源 #

最新版@sentry/react（8.x及以上）仅支持React 17及更高版本，React 16项目直接安装会因版本不兼容或未转译的ES语法触发模块解析失败。

解决方案 #

1. 安装适配React 16的Sentry版本 #

卸载当前版本，指定安装7.x系列的@sentry/react（7.x兼容React 16）：

npm uninstall @sentry/react
npm install @sentry/react@^7.100.0

2. 使用React 16兼容的Sentry初始化方式 #

不要使用React 18的createRoot，保持React 16的ReactDOM.render初始化逻辑，将Sentry初始化代码放在渲染之前：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import registerServiceWorker from "./registerServiceWorker";
import "./index.css";
import "bootstrap/dist/css/bootstrap.css";
import * as Sentry from "@sentry/react";

// 初始化Sentry，替换为你的项目DSN
Sentry.init({
  dsn: "你的Sentry项目DSN",
  environment: process.env.NODE_ENV,
  release: "项目版本号" // 可选，用于区分不同版本
});

ReactDOM.render(<App />, document.getElementById("root"));

3. 配置Babel转译Sentry模块 #

React 16项目通常默认不转译node_modules中的包，但@sentry/react的部分代码使用了未转译的ES语法，需要修改Webpack配置让Babel处理该模块：

自定义Webpack配置场景

修改webpack.config.js中的规则，排除@sentry以外的node_modules包：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules\/(?!(@sentry)\/)/, // 仅转译@sentry相关包
        use: {
          loader: "babel-loader",
          options: {
            presets: ["react-app"] // 或你的项目Babel预设
          }
        }
      }
    ]
  }
};

Create React App（旧版含registerServiceWorker）场景

CRA默认不允许修改Webpack配置，需用react-app-rewired覆盖配置：

1. 安装依赖：

npm install react-app-rewired --save-dev

2. 在项目根目录创建config-overrides.js：

module.exports = function override(config, env) {
  // 找到Babel loader规则，修改exclude条件
  const babelRule = config.module.rules.find(rule => rule.oneOf);
  if (babelRule) {
    babelRule.oneOf.forEach(rule => {
      if (rule.exclude) {
        rule.exclude = /node_modules\/(?!(@sentry)\/)/;
      }
    });
  }
  return config;
};

3. 修改package.json中的scripts：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4. 验证修复 #

重新启动项目，检查是否还存在模块解析错误，同时确认Sentry是否能正常捕获错误。

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