在 jsx 中加载带有花括号的 jsx 文件时出错

Question

我的 .jsx 文件中有以下代码。

var React = require('react'),
    ReactDOM = require('react-dom');
module.exports = React.createClass({
    render: function() {
        var classes = {container: 'test'};
        return (<div className={classes.container}></div>)
    }
});

我在 webpack-dev-server 中为 jsx 文件使用以下加载器配置

loaders: [{
            test: /\.jsx?$/,
            loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react'],
            exclude: /node_modules/
          },{
            test: /\.jsx?$/,
            loader: 'string-replace',
            query: jsRepQuery,
            exclude: /node_modules/
          }]

我遇到以下错误。

ERROR in ./~/test.jsx
Module parse failed: /test.jsx Unexpected token (20:23)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (20:23)

基本上错误的位置（20:23）是花括号{.我需要使用任何其他装载程序吗？

更新：失败的解析器文件在 node_modules 文件夹中。由于它被排除在外，看起来我们遇到了这个错误。但是我不希望所有 node_modules 都被执行。我怎样才能将此 node_module 从排除列表中排除？

Answer 1

我已经添加了另一个加载器来接受仅需要的 node_module 通过使用以下内容。

loaders: [{
            test: /\.jsx?$/,
            loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react'],
            exclude: /node_modules/
          },{
            test: /\.jsx?$/,
            loader: 'string-replace',
            query: jsRepQuery,
            exclude: /node_modules/
          },{
              test: /\.jsx?$/,
              loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react'],
              include: function(absPath) {
              if(absPath.indexOf('/node_modules/orb/') > -1) {
                return true;
              } else {
                   return false;
              }
           }
          }]

在 jsx 中加载带有花括号的 jsx 文件时出错

Error when loading jsx files with curly braces inside jsx

webpack-dev-server