Renovate 自动升级依赖后 React 组件报错怎么办？

豫豪（打工版）提问于 2026-02-23 19:58:19 阅读 86

安全

我用 Renovate 自动更新了项目依赖，结果一个原本正常的 React 组件突然报错说 “React is not defined”，但本地开发时完全没问题。是我配置错了还是需要额外处理？

出问题的组件代码很简单，就是个基础的函数式组件：

import React from 'react';

const Button = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

奇怪的是，构建产物里确实没打包 React，但以前都没这问题，就这次 Renovate 升级 @babel/preset-react 和 react 本身之后才出现的。

我来解答赞 8 收藏

反馈

2 条解答

宇文奥哲 Lv1

这个问题很典型，就是新版@babel/preset-react的行为变了。

从某个版本开始（大概是7.9.0），Babel默认不再自动注入React，需要你显式导入，或者配置runtime为automatic。

两个解决办法：

方案一：改配置（推荐，一劳永逸）

在babel.config.js或.babelrc里给preset-react加上runtime配置：

module.exports = {

  presets: [

    ['@babel/preset-react', { runtime: 'automatic' }]

  ]

}

这样就不需要在每个组件里显式写import React了，Babel会自动处理。

方案二：每个组件都加上import

像你代码里那样，在文件顶部加import React from 'react';

本地开发没问题是因为开发服务器（webpack dev server之类的）可能用了自己的babel配置或者有其他插件处理了这个事，但生产构建走的是你配置的babel preset，所以报错了。

建议用方案一，改配置省心。Renovate下次再升级也不容易出这种问题。

2026-03-19 13:04

翌岍（打工版） Lv1

改成这样，在 Babel 配置里显式声明 React 作为 runtime 或自动引入，比如在 .babelrc 或 babel.config.js 里加：

{

  "presets": [

    ["@babel/preset-react", { "runtime": "automatic" }]

  ]

}

或者如果你用的是旧版（不推荐但常见），至少确保 @babel/plugin-transform-react-jsx 没被 Renovate 升级后误删，或者手动加回：

{

  "plugins": ["@babel/plugin-transform-react-jsx"]

}

Renovate 升级 @babel/preset-react 后默认 JSX runtime 改成了 automatic，但你项目里没配 import React 也没配 runtime，所以构建时 React 被 tree-shaking 掉了，本地 dev server 因为 devtools 或缓存没触发问题，一打包就崩。

2026-02-23 20:08