Webpack / React应用程序设置失败 - ＆＃34; React未定义＆＃34;

时间：2017-08-14 12:01:27

标签： reactjs webpack

我正在使用webpack设置React应用程序。

当我使用webpack-dev-server在本地投放我的应用时，我在控制台中获得了VM1086 bundle.js:9812 Uncaught ReferenceError: React is not defined。

我知道发生了什么，因为没有任何其他错误或信息可以继续，因为webpack似乎编译好了。

的index.html

<html>
<head>
    <script src="./dist/bundle.js" ></script>
</head>
<body>
    <div id="mount"></div>
</body>
</html>

webpack config

var path = require('path');

module.exports = {

  entry: [
  './src/App.js',
  ],
  output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js'
  },
  module: {
    loaders: [
    {
      test: /\.js$/,
      exclude: ['node_modules'],
      loader: 'babel-loader',
      query: {
        babelrc: true,

      },
    }
    ]
  }
}

app.js

import React from 'react';
import ReactDOM from 'react-dom';
console.log('Hello World!');




class App extends React.Component {
    render() {
        return  (<div>314159263</div>);

    }
}

ReactDOM.render(<App />, document.getElementById('mount'))

1 个答案:

答案 0 :(得分：0)

尝试在<div id="mount"></div>之后定义bundle.js，因为你的bundle可能会编译你的代码并且找不到代码的呈现位置

    </head>
    <body>
        <div id="mount"></div>
<script src="./dist/bundle.js" ></script>
    </body>
    </html>

并在您的webpack中添加此

 query: {
               presets: ['es2015', 'react']
            }