React项目报错：Class constructor Alert cannot be invoked without 'new' 求助

架构老林

2026-7-19

解决“Class constructor Alert cannot be invoked without 'new'”错误

这个错误通常是因为ES6类语法未被Babel正确转译为目标浏览器兼容的代码，或者目标环境不支持原生类构造函数的调用方式。以下是通过修改package.json中的Babel配置来解决问题的步骤：

1. 确认依赖安装

首先确保已安装必要的Babel相关依赖：

npm install @babel/core @babel/preset-env @babel/preset-react core-js@3 --save-dev

2. 修改package.json中的Babel配置

在package.json中添加或更新babel配置块，确保ES6类被正确转译：

"babel": {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "ie >= 11"
          ]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ]
}

配置说明：

@babel/preset-env：根据指定的目标浏览器自动转译ES6+语法到兼容版本。
targets.browsers：定义需要支持的浏览器范围，覆盖主流浏览器的最新2个版本及IE11，确保类构造函数被转译为旧浏览器能识别的形式。
useBuiltIns: "usage"：自动检测代码中使用的ES6+特性，按需引入core-js的polyfill，无需手动全局导入。
corejs: 3：指定使用的core-js版本，需与安装的core-js版本一致。

3. 调整browserslist配置（若使用Create React App）

如果你的项目基于Create React App，修改package.json中的browserslist配置，确保编译目标匹配实际运行环境：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}