节点 react babel webpack，意外的令牌错误

Question

首先，我真的试图自己修复它，我在这里找到了几个类似的问题，但是没有帮助我。

获取此错误：

ERROR in ./src/components/App.jsx
Module parse failed: D:JS projectshabr-appsrccomponentsApp.jsx Unexpected token (54:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div className='App'>
|         <h1>Hello World!</h1>
|         <div>
 @ ./src/client.js 3:0-42
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8050 webpack/hot/dev-server babel-polyfill ./src/client.js

client.js文件：

import React      from 'react';
import ReactDOM   from 'react-dom';
import App        from './components/App';
ReactDOM.render ("<App />", document.getElementById('react-view'));

app.jsx中的渲染函数看起来像：

render() {
    return (
      <div className='App'>
        <h1>Hello World!</h1>
        <div>
          <p>Введите Ваше имя:</p>
          <div><input onChange={this.handleNameChange} /></div>
          {this.renderGreetingWidget()}
        </div>
      </div>
    );
  }

webpack.config.js文件：

global.Promise         = require('bluebird');
var webpack            = require('webpack');
var path               = require('path');
var ExtractTextPlugin  = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var publicPath         = 'http://localhost:8050/public/assets';
var cssName            = process.env.NODE_ENV === 'production' ? 'styles-[hash].css' : 'styles.css';
var jsName             = process.env.NODE_ENV === 'production' ? 'bundle-[hash].js' : 'bundle.js';
var plugins = [
  new webpack.DefinePlugin({
    'process.env': {
      BROWSER:  JSON.stringify(true),
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
  }),
  new ExtractTextPlugin(cssName)
];
if (process.env.NODE_ENV === 'production') {
  plugins.push(
    new CleanWebpackPlugin([ 'public/assets/' ], {
      root: __dirname,
      verbose: true,
      dry: false
    })
  );
  plugins.push(new webpack.optimize.DedupePlugin());
  plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}
module.exports = {
  entry: ['babel-polyfill', './src/client.js'],
  resolve: {
    extensions:         ['.js', '.jsx']
  },
  plugins: [
     new ExtractTextPlugin("styles.css"),
     new webpack.LoaderOptionsPlugin({
       debug: true,
       options: {
         eslint: { configFile: '.eslintrc' }
       }
     })
  ],
  output: {
    path: `${__dirname}/public/assets/`,
    filename: jsName,
    publicPath
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ],
    loaders: [
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader'})
      },
      {
        test: /.less$/,
        loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader!less-loader'})
      },
      { test: /.gif$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
      { test: /.jpg$/, loader: 'url-loader?limit=10000&mimetype=image/jpg' },
      { test: /.png$/, loader: 'url-loader?limit=10000&mimetype=image/png' },
      { test: /.svg/, loader: 'url-loader?limit=26000&mimetype=image/svg+xml' },
      { test: /.(woff|woff2|ttf|eot)/, loader: 'url-loader?limit=1' },
      { test: /.jsx?$/, loaders: ['react-hot-loader', 'babel-loader?presets[]=react,presets[]=es2015'],
                          exclude: [/node_modules/, /public/] , query: {presets: ['es2015', 'react', 'react-hot']} },
      { test: /.json$/, loader: 'json-loader' },
    ]
  },
  devtool: process.env.NODE_ENV !== 'production' ? 'source-map' : null,
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' }
  }
};

我可以解决此问题的唯一方法 - 是将引号围绕HTML呈现：

render() {
    return (
      `<div className='App'>
        <h1>Hello World!</h1>
        <div>
          <p>Введите Ваше имя:</p>
          <div><input onChange={this.handleNameChange} /></div>
          {this.renderGreetingWidget()}
        </div>
      </div>`
    );
  }

，但是在那之后，我在浏览器和Nodemon中获得了此错误：

Invariant Violation: App.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我检查并重新检查了所有依赖关系，模块和文件。不过，我找不到错误。有人可以帮我吗？

P.S。对不起，我的英语很糟糕。

有趣的事情。当我在app.jsx中没有这些引用的情况下启动nodemon时，我的页面加载，但没有CSS。之后，我在file app.jsx中添加引号，现在webpack-devserver构建了所有内容，并且刷新后Page获取.css。JS-script仍然无法处理它，但看起来几乎应该...直到我重新启动Nodemon ...它开始显示相同的错误"不变违规"：app.render（）：有效的反应元素（或null）必须返回。您可能已经返回了未定义的，一个数组或其他无效的对象。"

Answer 1

该错误告诉您您没有定义可以处理JSX的加载程序，尽管看起来可能像您在WebPack配置中所做的那样。问题是您同时定义module.loaders和module.rules。当WebPack看到module.loaders时，它会完全忽略module.rules（尽管出于兼容原因仍然存在）。修复程序很简单，只需将所有装载机放在.jsx?。

下

，您的query规则中也存在一个问题，因为options（也被弃用并用module替换）不能用于装载机数组，而应在数组中的每个加载程序定义。由于您以字符串的形式进行了内联，因此您根本不需要它。

获得工作配置替换module.rules0部分，用：

module: {
  rules: [
    {
      test: /.css$/,
      loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader'})
    },
    {
      test: /.less$/,
      loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader!less-loader'})
    },
    { test: /.gif$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
    { test: /.jpg$/, loader: 'url-loader?limit=10000&mimetype=image/jpg' },
    { test: /.png$/, loader: 'url-loader?limit=10000&mimetype=image/png' },
    { test: /.svg/, loader: 'url-loader?limit=26000&mimetype=image/svg+xml' },
    { test: /.(woff|woff2|ttf|eot)/, loader: 'url-loader?limit=1' },
    { test: /.jsx?$/, use: ['react-hot-loader', 'babel-loader?presets[]=react,presets[]=es2015'],
      exclude: [/node_modules/, /public/] },
    { test: /.json$/, loader: 'json-loader' },
  ]
},

如果您决定使用.jsx?，这绝对更可读，您的CC_12规则看起来像这样：

{
  test: /.jsx?$/,
  use: [
    'react-hot-loader',
    { loader: 'babel-loader', options: { presets: ['react', 'es2015'] } },
  ],
  exclude: [/node_modules/, /public/]
}

如文档所示。