Webpack打包React应用出现React未定义问题的配置方案问询

问题详情 #

使用Webpack（未开启压缩）打包默认React应用，运行时bundle.js报错React is not defined，报错代码片段：

function App_App() {
  return /*#__PURE__*/React.createElement("div", {
    className: "App"

排查发现Webpack将React模块导入为小写变量react，但编译后的代码仍在使用大写的React.createElement：

// EXTERNAL MODULE: ./node_modules/react/index.js
var react = __webpack_require__(294);

手动把代码里的React替换为react后，bundle就能正常加载。

复现步骤 #

npx create-react-app w && cd w
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server
cp ./public/* ./src

创建.babelrc和webpack.config.js后执行打包：

npx webpack --mode production

打开/dist/index.html会显示空白页面。

解决配置 #

问题根源是Babel未启用React 17+的自动JSX转换，只需修改以下配置：

1. 更新.babelrc配置 #

给@babel/preset-react添加runtime: "automatic"选项，让Babel自动处理React API的导入，不再依赖全局的React变量：

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

2. 清理冗余导入（可选） #

如果你的组件文件里写了import React from 'react';，可以直接删除，因为自动运行时会自动导入所需的React API。

3. 重新打包验证 #

执行打包命令：

npx webpack --mode production

此时编译后的代码会自动使用正确的API引用方式，不会再出现React is not defined的错误。

原理说明 #

React 17及以上版本支持自动JSX转换，@babel/preset-react的runtime: "automatic"配置开启这个特性后，Babel会把JSX编译成_jsx/_jsxs函数调用，而不是依赖全局的React.createElement，从根本上避免了变量大小写不匹配的问题。

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