錯誤：未捕獲ReferenceError：未定義React

Question

總覽

我正在嘗試使用Babel和Webpack構建一個React應用程序。 我知道我可以使用create-react-app但我想學習這些技術如何為我自己協同工作。

當我運行yarn run start或yarn run build （請參見下面的package.json ）時，Webpack會報告說已成功構建了捆綁包。 在瀏覽器中運行應用程序時，出現Uncaught ReferenceError: React is not defined錯誤。

關於這個相同的錯誤，有很多關於SO的問題，但是沒有一個解決方案能夠解決我的問題。

題

我想讓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';忽略了我import React from 'react'; 陳述。
另外，我還沒有在我的Webpack配置中找到正確的devtools和debug屬性，以真正使源映射正常工作。 我還沒有在編譯輸出中看到它們。

編輯

損壞的bundle.js對於SO而言太大（超過21,000行），因此，這里是一個鏈接： http ://chopapp.com/#1a8udqpj-加載和顯示需要幾秒鍾。

Answer 1

我知道您已經將其標記為已回答，但是由於您正在嘗試學習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 ”是包含bundle.js的文件夾的物理路徑。 “ publicPath ”是該文件夾的虛擬路徑（URL）。 因此，您甚至不必使用“ dist”。 例如，如果您使用...

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

然后，您的HTML指向：

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

希望有幫助！

Answer 2

根據我在React方面的有限經驗，我希望提出以下意見。 首先是關於devTools和調試的問題。 webpack的調試標志（根據其官方文檔）將加載程序切換到調試模式。 然后，據我了解，webpack在開發環境中運行時，實際上並不會將代碼編譯為硬文件，而是將其保存在內存中。 因此，源映射也保存在內存中並鏈接到瀏覽器。 打開瀏覽器開發工具並查看源代碼時，您會看到它們的效果。

現在，假設您已正確配置開發服務器，我還假設您的index.html位於源目錄中。 如果是這種情況，那么您的腳本參考應該只指向“ /bundle.js”而不是“ dist / bundle.js”，因為可能沒有物理的“ dist”文件夾。

我還建議從webpack.config.js的入口點刪除“ .js”

只是一些觀察。 我希望它們對您有用。

Answer 3

您將需要在webpack.config.js文件中的模塊中添加查詢：

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

錯誤：未捕獲ReferenceError：未定義React

問題描述

總覽

題

碼

觀察結果

編輯

3 個解決方案

解決方案1
2 2016-12-27 17:20:27

解決方案2
1 已采納 2016-12-27 16:10:55

解決方案3
0 2016-12-27 15:08:53

錯誤：未捕獲ReferenceError：未定義React

問題描述

總覽

題

碼

觀察結果

編輯

3 個解決方案

解決方案1 2 2016-12-27 17:20:27

解決方案2 1 已采納 2016-12-27 16:10:55

解決方案3 0 2016-12-27 15:08:53

解決方案1
2 2016-12-27 17:20:27

解決方案2
1 已采納 2016-12-27 16:10:55

解決方案3
0 2016-12-27 15:08:53