错误：未捕获引用错误：React 未定义

Question

错误：未捕获引用错误：React 未定义

mjs*_*sen 4 javascript reactjs webpack babeljs webpack-dev-server

概述

\n\n

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

\n\n

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

\n\n

关于同样的错误，有很多问题，但没有一个解决方案可以解决我的问题。

\n\n

问题

\n\n

为了让 React、Babel 和 Webpack 很好地协同工作，我还缺少哪一部分？

\n\n

代码

\n\n

包.json

\n\n

{\n  "private": true,\n  "scripts": {\n    "build": "webpack",\n    "start": "webpack-dev-server"\n  },\n  "dependencies": {\n    "react": "^15.4.1",\n    "react-dom": "^15.4.1",\n    "react-redux": "^5.0.1",\n    "redux": "^3.6.0"\n  },\n  "devDependencies": {\n    "babel-core": "^6.21.0",\n    "babel-loader": "^6.2.10",\n    "babel-preset-es2015": "^6.18.0",\n    "babel-preset-react": "^6.16.0",\n    "redux-devtools": "^3.3.1",\n    "webpack": "^1.14.0",\n    "webpack-dev-server": "^1.16.2"\n  }\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

.babelrc

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

webpack.config.js

\n\n

module.exports = {\n  entry: \'./src/index.js\',\n  output: {\n    filename: \'bundle.js\',\n    path: \'./dist\'\n  },\n  devtool: \'source-map\',\n  debug: true,\n  module: {\n    loaders: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        loader: \'babel-loader\'\n      }\n    ]\n  }\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

索引.html

\n\n

<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <title>Test</title>\n</head>\n<body>\n  <div id="root"></div>\n  <script src="dist/bundle.js"></script>\n</body>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n\n

src/index.js

\n\n

import ReactDom from \'react-dom\';\nimport React from \'react\';\nimport App from \'./App\';\n\nReactDom.render(\n  <App />,\n  document.getElementById(\'root\'),\n);\n

Run Code Online (Sandbox Code Playgroud)\n\n

src/App.js

\n\n

import React from \'react\';\nimport { Component } from \'react\';\n\nexport default class App extends Component {\n  render() {\n    return (\n      <h1>hello</h1>\n    );\n  }\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

观察结果

\n\n

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

\n\n

编辑

\n\n

损坏的bundle.js对于SO来说太大了（21,000多行），所以这里有一个链接： http: //chopapp.com/#1a8udqpj \xe2\x80\x94 加载和显示需要几秒钟的时间。

\n

Answer 1

Jef*_*oud 5

由于您正在尝试学习 webpack 等的细节...您最初的问题是您需要output.publicPath在 webpack.config.js 中指定：

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'
      }
    ]
  }
}

Run Code Online (Sandbox Code Playgroud)

“ path”是包含bundle.js 的文件夹的物理路径。“ publicPath”是该文件夹的虚拟路径 (URL)。所以，你甚至不必使用“dist”。例如，如果您使用...

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

Run Code Online (Sandbox Code Playgroud)

然后您的 HTML 将指向：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，2 月前
查看次数：	17222 次
最近记录：	4 年，2 月前