React TypeScript应用出现__webpack_require__未定义错误求助

1. 修复New Relic的环境判断加载逻辑 #

报错明确指向New Relic模块，问题出在开发环境下New Relic提前加载，导致Webpack的模块加载变量未初始化。修改入口文件（如src/index.tsx）的New Relic引入逻辑：

// 仅在生产环境加载New Relic
if (process.env.NODE_ENV === 'production') {
  // 使用动态导入避免开发环境下的初始化问题
  import('newrelic').then(newrelic => {
    newrelic.start()
  })
}

// 原有的React渲染代码
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

2. 生成并修改Webpack配置（针对无显式配置的脚手架项目） #

如果项目用Create React App这类隐式Webpack的脚手架，用react-app-rewired自定义配置，移除开发环境的New Relic相关逻辑：

• 安装依赖：

  yarn add react-app-rewired --dev
  

• 项目根目录新建config-overrides.js：

  module.exports = (config, env) => {
    if (env === 'development') {
      // 过滤掉包含New Relic的入口文件
      config.entry = config config.entry.filter(entry => !entry.includes('newrelic'))
      // 移除New Relic相关Webpack插件
      config.plugins = config.plugins.filter(plugin => {
        return !plugin.constructor.name.includes('NewRelic')
      })
    }
    return config
  }
  

• 修改package.json的dev脚本：

  "scripts": {
    "dev": "react-app-rewired start",
    // 保留其他脚本如build、test
  }
  

• 重启开发服务器：

  yarn dev
  

3. 彻底清理Yarn缓存与依赖 #

虽然重新克隆过仓库，但Yarn缓存可能残留异常文件：

# 清除Yarn缓存
yarn cache clean
# 删除依赖目录与锁文件
rm -rf node_modules yarn.lock
# 重新安装依赖
yarn install
# 启动开发服务
yarn dev

4. 验证APISIX反向代理配置（如果通过APISIX访问前端） #

如果是通过APISIX访问本地dev服务，确保路由指向正确的宿主机地址（Linux下需用宿主机IP而非localhost）：
示例APISIX路由配置（config.yaml或Dashboard配置）：

routes:
  - uri: /*
    upstream:
      nodes:
        "192.168.1.100:3000": 1  # 替换为你的Linux Mint宿主机IP
    methods: ["GET", "POST"]
    host: "your-frontend-domain.com"

验证直接访问http://localhost:3000是否正常，如果直接访问正常，问题出在APISIX的路由配置。

5. 降级/升级New Relic版本以适配当前环境 #

检查New Relic与React、Webpack的版本兼容性：

• 查看当前React版本：

  yarn list react
  

• 安装适配的New Relic版本（例如React 18对应New Relic 8.x版本）：

  yarn add newrelic@^8.17.0
  

  安装完成后重启开发服务。

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