logo标签列表

React未定义的参考错误？我正在使用webpack和webpack-dev-server。

node.jsreactjswebpackwebpack-dev-serverreact-dom
4
这是我的 JSX:
 var React = require('react');
  var ReactDOM = require('react-dom');
  ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('content')
  )

我使用webpack构建，生成build/bundle.js文件，并将其导入到index.html中。

index.html:

<!DOCTYPE html>
<html>
  <head>
  ┊ <meta charset="utf-8">
  ┊ <meta name="viewport" content="width=device-width">
  ┊ <title></title>
  </head>
  <body>
  ┊ <div id="content"></div>
  ┊ <script src="./build/bundle.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

但是当我运行webpack-dev-server时，chrome控制台显示错误：
bundle.js:57 Uncaught ReferenceError: React is not defined
我确定我已经运行了npm install react
enter image description here
如何解决？(-_-)ゞ゛
你是否运行了 npm start 并在命令行上看到它的运行情况？ - user4398985
你的webpack.config.js是什么？你设置了React预设吗？ - Ya Zhuang
@bitsMix 是的，我在 .babelrc 中设置了预设。 - nataila
2个回答
4

您应该将此添加到您的app.js而不是.jsx文件中。

var React = require('react');
  var ReactDOM = require('react-dom');
  ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('content')
  )

JSX是一种通过React组件解释的转译语言。因此，在app.js中必须有React，以便React组件解释jsx！

@nataila，.jsx 文件是 HTML/CSS 和 JavaScript 的混合体，而 .js 文件则是纯 JavaScript。你的 app.js 必须包含 React，因为 JSX 会被转换成 React.createElement() 调用，所以需要在作用域中引入 React 来处理它们。 - user4398985
2
无论是app.js还是app.jsx，只要操作者在webpack.config.js中使用正确的配置构建文件即可。毕竟语法都是JSX。 - Shubham Khatri
@ShubhamKhatri 但是如果我想使用 JSX，我该如何在我的 webpack.config.js 中配置它呢？ - nataila
如果你把你的webpack配置文件发出来，我可以帮忙。 - Shubham Khatri
@ShubhamKhatri 这非常重要。JSX是一种经过转译的语言，由React组件解释。因此，在app.js中必须有React才能让React组件解释jsx！请参阅此帖子，https://dev59.com/nFwY5IYBdhLWcg3wEEV2 - user4398985
0

JSX语法和ES6在所有浏览器中都不被支持。

因此，如果我们在React代码中使用它们，我们需要使用一个工具将它们翻译成浏览器支持的格式。Babel就是这样一个工具。

Webpack使用加载器在捆绑文件之前进行翻译。

要设置，请安装以下npm包。

npm i babel-loader babel-preset-es2015 babel-preset-react -S

babel-preset-es2015和babel-preset-react是由babel-loader使用的插件，分别用于翻译ES6和JSX语法。

下一步是在打包文件时告诉Webpack使用babel-loader。

// Existing Code ....
var config = {
  // Existing Code ....
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      }
    ]
  }
}

loaders属性接受一个加载器数组，下面我只使用了babel-loader。每个加载器属性都应该通过test属性指定要处理的文件扩展名。可以使用正则表达式配置.js和.jsx文件，如/\.jsx?/

最终的webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: "inline-sourcemap",
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: [
      new webpack.ProvidePlugin({
        'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
      })
  ] 
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接