求助排查Uncaught ReferenceError: React is not defined错误
2026-7-12
排查Uncaught ReferenceError: React is not defined错误
项目此前可正常运行，现在出现Uncaught ReferenceError: React is not defined错误，已简化至最简结构仍无法解决，不想直接在index页面内嵌JSX。项目基于Webpack+Babel构建，相关代码及配置如下：
代码文件
index.js
import React from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.js'; const container = document.getElementById('root'); const root = createRoot(container); // createRoot(container!) if you use TypeScript root.render(<App />);
App.js
export default function App() { return ( <h1>TEST</h1> ); }
报错信息
Uncaught ReferenceError: React is not defined App webpack://myproject/./assets/App.js?:6 React 11 workLoop webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:266 flushWork webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:239 performWorkUntilDeadline webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:533 EventHandlerNonNull* webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:571 <anonymous> webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:633 js http://127.0.0.1:8000/static/index-bundle.js:89 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> webpack://myproject/./node_modules/scheduler/index.js?:4 js http://127.0.0.1:8000/static/index-bundle.js:99 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 React 2 js http://127.0.0.1:8000/static/index-bundle.js:39 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> React js http://127.0.0.1:8000/static/index-bundle.js:59 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> React js http://127.0.0.1:8000/static/index-bundle.js:49 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> webpack://myproject/./assets/index.js?:4 js http://127.0.0.1:8000/static/index-bundle.js:29 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> http://127.0.0.1:8000/static/index-bundle.js:187 <anonymous> http://127.0.0.1:8000/static/index-bundle.js:189 index-bundle.js line 19 > eval:6:3 The above error occurred in the <App> component: App@webpack://myproject/./assets/App.js?:6:3 Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react-dom.development.js:18687:15 React 12 workLoop webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:266 flushWork webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:239 performWorkUntilDeadline webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:533 (Async: EventHandlerNonNull) <anonymous> webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:571 <anonymous> webpack://myproject/./node_modules/scheduler/cjs/scheduler.development.js?:633 js http://127.0.0.1:8000/static/index-bundle.js:89 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> webpack://myproject/./node_modules/scheduler/index.js?:4 js http://127.0.0.1:8000/static/index-bundle.js:99 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 React 2 js http://127.0.0.1:8000/static/index-bundle.js:39 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> React js http://127.0.0.1:8000/static/index-bundle.js:59 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> React js http://127.0.0.1:8000/static/index-bundle.js:49 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> webpack://myproject/./assets/index.js?:4 js http://127.0.0.1:8000/static/index-bundle.js:29 __webpack_require__ http://127.0.0.1:8000/static/index-bundle.js:123 <anonymous> http://127.0.0.1:8000/static/index-bundle.js:187 <anonymous> http://127.0.0.1:8000/static/index-bundle.js:189
配置文件
package.json
{ "name": "myproject", "version": "1.0.0", "private": true, "proxy": "http://127.0.0.1:8000", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --mode development --watch" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.22.10", "@babel/preset-env": "^7.22.10", "@babel/preset-react": "^7.22.5", "babel-loader": "^9.1.3", "webpack": "^5.88.2", "webpack-cli": "^5.1.4" }, "dependencies": { "axios": "^1.4.0", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.15.0" } }
webpack.config.js
const path = require('path'); module.exports = { entry: './assets/index.js', // path to our input file output: { filename: 'index-bundle.js', // output bundle file name path: path.resolve(__dirname, './static'), // path to our Django static directory }, /*Use Babel's env and react presets to compile all .js and .jsx files that aren't inside the node_modules directory*/ module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"] } }, ] } };
解决方案
这个错误的核心原因是：在App.js中使用了JSX，但没有导入React。虽然React 17+支持入口文件不导入React就使用JSX，但该特性需要Babel的@babel/preset-react配置runtime: 'automatic'来支持，否则每个使用JSX的文件都必须显式导入React。
你有两种修复方式：
方式一：在App.js中显式导入React
修改App.js，添加React导入语句：
import React from 'react'; export default function App() { return ( <h1>TEST</h1> ); }
方式二：配置Babel自动引入React（推荐）
修改webpack.config.js中的@babel/preset-react配置，添加runtime: 'automatic'，让Babel自动为所有使用JSX的文件注入React依赖，无需手动导入：
module.exports = { // ...其他原有配置 module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: [ "@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }] ] } }, ] } };
修改后重新执行npm run dev构建项目，错误即可解决。
内容的提问来源于stack exchange，提问作者user22002675
相关产品推荐
相关产品推荐
