错误：未捕获ReferenceError：未定义React
[英]Error: Uncaught ReferenceError: React is not defined
问题描述
Overview 
总览
I am trying to use Babel and Webpack to build a React app. 我正在尝试使用Babel和Webpack构建一个React应用程序。 I know I could use create-react-app but I'd like to learn how these technologies can work together for myself. 我知道我可以使用create-react-app但我想学习这些技术如何为我自己协同工作。
When I run yarn run start or yarn run build (see package.json below), Webpack reports to have built the bundle fine. 当我运行yarn run start或yarn run build （请参见下面的package.json ）时，Webpack会报告说已成功构建了捆绑包。 When I run the application in the browser, I get the Uncaught ReferenceError: React is not defined error. 在浏览器中运行应用程序时，出现Uncaught ReferenceError: React is not defined错误。
There are a number of questions on SO regarding this same error, but none of the solutions have solved my problem yet. 关于这个相同的错误，有很多关于SO的问题，但是没有一个解决方案能够解决我的问题。
Question 题
What piece am I missing to get React, Babel, and Webpack to play together nicely? 我想让React，Babel和Webpack一起好玩时我缺少什么？
Code 码
package.json package.json
{
"private": true,
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^5.0.1",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"redux-devtools": "^3.3.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
}
.babelrc .babelrc
{
"presets": ["react", "es2015"]
}
webpack.config.js webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
devtool: 'source-map',
debug: true,
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
}
index.html index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
src/index.js src / index.js
import ReactDom from 'react-dom';
import React from 'react';
import App from './App';
ReactDom.render(
<App />,
document.getElementById('root'),
);
src/App.js src / App.js
import React from 'react';
import { Component } from 'react';
export default class App extends Component {
render() {
return (
<h1>hello</h1>
);
}
}
Observations 观察结果
- It seems that Webpack/Babel is expecting
Reactto be available on the global scope, or is ignoring myimport React from 'react';Webpack / Babel似乎期望React可以在全球范围内使用，或者import React from 'react';忽略了我import React from 'react';statements.陈述。 - Also, I have yet to find the proper incantation of
devtoolsanddebugproperties in my Webpack config to actually get source maps working.另外，我还没有在我的Webpack配置中找到正确的devtools和debug属性，以真正使源映射正常工作。 I don't yet see them in the compiled output.我还没有在编译输出中看到它们。
EDIT 编辑
The broken bundle.js is too large for SO (21,000+ lines), so here is a link: http://chopapp.com/#1a8udqpj — it takes several seconds to load and display. 损坏的bundle.js对于SO而言太大（超过21,000行），因此，这里是一个链接： http ://chopapp.com/#1a8udqpj-加载和显示需要几秒钟。
3 个解决方案
解决方案1
2 2016-12-27 17:20:27
I know you've already marked this as answered, but since you're trying to learn the in's and out's of webpack et al... Your original problem was that you needed to specify the output.publicPath in your webpack.config.js: 我知道您已经将其标记为已回答，但是由于您正在尝试学习webpack的内容，所以……您的原始问题是您需要在output.publicPath中指定output.publicPath ：
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: './dist',
publicPath: '/dist' // <- was missing
},
devtool: 'source-map',
debug: true,
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
}
" path " is the physical path to the folder that contains your bundle.js. “ path ”是包含bundle.js的文件夹的物理路径。 " publicPath " is the virtual path (URL) to that folder. “ publicPath ”是该文件夹的虚拟路径（URL）。 So, you don't even have to use "dist". 因此，您甚至不必使用“ dist”。 For example, if you used... 例如，如果您使用...
output: {
filename: 'bundle.js',
path: './dist',
publicPath: '/assets'
},
Your HTML would then point to: 然后，您的HTML指向：
<script src="assets/bundle.js"></script>
Hope that helps! 希望有帮助！
解决方案2
1 已采纳 2016-12-27 16:10:55
From my limited experience with React, I wish to make the following observations. 根据我在React方面的有限经验，我希望提出以下意见。 First to your question regarding devTools and debug. 首先是关于devTools和调试的问题。 The debug flag for webpack (according to their official documentation ) switches the loaders to debug mode. webpack的调试标志（根据其官方文档 ）将加载程序切换到调试模式。 Then, from what I understand, webpack, when running in a dev environment, does not actually compile the code to hard files, but keeps it in memory. 然后，据我了解，webpack在开发环境中运行时，实际上并不会将代码编译为硬文件，而是将其保存在内存中。 Thus the source maps are also kept in memory and linked to the browser. 因此，源映射也保存在内存中并链接到浏览器。 You see their effect when you open the browser dev tools and view source. 打开浏览器开发工具并查看源代码时，您会看到它们的效果。
Now assuming you have the dev server configured correctly, I also assume your index.html is located in your source directory. 现在，假设您已正确配置开发服务器，我还假设您的index.html位于源目录中。 If this is the case, then your script reference should simply point to '/bundle.js' and not 'dist/bundle.js' since there may not be a physical "dist" folder. 如果是这种情况，那么您的脚本参考应该只指向“ /bundle.js”而不是“ dist / bundle.js”，因为可能没有物理的“ dist”文件夹。
I would also suggest dropping the ".js" from your entry point in the webpack.config.js 我还建议从webpack.config.js的入口点删除“ .js”
Just some observations. 只是一些观察。 I hope they are of use to you. 我希望它们对您有用。
解决方案3
0 2016-12-27 15:08:53
You will need to add a query to your module within the webpack.config.js file: 您将需要在webpack.config.js文件中的模块中添加查询：
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.