Error: Uncaught ReferenceError: React is not defined

Question

概览

我正在尝试使用 Babel 和 Webpack 构建 React 应用程序。我知道我可以使用 create-react-app，但我想了解这些技术如何为我自己协同工作。

当我运行 yarn run start 或 yarn run build（参见下面的 package.json）时，Webpack 报告已构建包美好的。当我在浏览器中运行应用程序时，出现 Uncaught ReferenceError: React is not defined 错误。

SO 上有很多关于同样错误的问题，但是 none 的解决方案已经解决了我的问题。

问题

要让 React、Babel 和 Webpack 很好地协同工作，我缺少什么？

代码

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

{
  "presets": ["react", "es2015"]
}

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

<!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

import ReactDom from 'react-dom';
import React from 'react';
import App from './App';

ReactDom.render(
  <App />,
  document.getElementById('root'),
);

src/App.js

import React from 'react';
import { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>hello</h1>
    );
  }
}

观察

似乎 Webpack/Babel 期望 React 在全局范围内可用，或者忽略了我的 import React from 'react'; 声明。
此外，我还没有在我的 Webpack 配置中找到 devtools 和 debug 属性的正确咒语来真正让源映射工作。我还没有在编译输出中看到它们。

编辑

损坏的 bundle.js 对于 SO（21,000 多行）来说太大了，所以这里是 link：http://chopapp.com/#1a8udqpj — 它加载和显示需要几秒钟。

Answer 1

您需要在 webpack.config.js 文件中向您的模块添加查询：

module: {
loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015']
  }
}]
},
 resolve: {
   extensions: ['', '.js', '.jsx']
};

Answer 2

我想发表以下看法。首先是关于 devTools 和调试的问题。 webpack 的调试标志（根据它们的 official documentation）将加载器切换到调试模式。然后，据我了解，webpack在开发环境中运行时，实际上并没有将代码编译为硬文件，而是将其保存在内存中。因此，源地图也保存在内存中并链接到浏览器。当您打开浏览器开发工具并查看源代码时，您会看到它们的效果。

现在假设您已正确配置开发服务器，我还假设您的 index.html 位于您的源目录中。如果是这种情况，那么您的脚本引用应该简单地指向“/bundle.js”而不是 'dist/bundle.js'，因为可能没有物理“dist”文件夹。

我还建议从 webpack.config.js

中的入口点删除“.js”

Answer 3

由于您正在尝试学习 webpack 等的来龙去脉...您最初的问题是您需要在 webpack.config.js 中指定 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" 是包含您的 bundle.js 的文件夹的物理路径。 “publicPath”是该文件夹的虚拟路径 (URL)。所以，你甚至不必使用“dist”。例如，如果您使用...

  output: {
    filename: 'bundle.js',
    path: './dist',
    publicPath: '/assets'
  },

您的 HTML 将指向：

<script src="assets/bundle.js"></script>

Error: Uncaught ReferenceError: React is not defined

Error: Uncaught ReferenceError: React is not defined

javascript

reactjs

webpack

babeljs

webpack-dev-server

概览

问题

代码

观察

编辑