Error when loading jsx files with curly braces inside jsx

问题

I am having following code in my .jsx file.

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

I am using following loader configuration in webpack-dev-server for jsx files

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

I am getting following error.

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)

Basically the position of error (20:23) is curly brace {. Do I need to use any other loader?

Update: failed parser file is in node_modules folder. Since it is excluded, looks like we are getting this error. But then I don't want all node_modules to get executed. How can I just exlude this node_module from the excludes list?

回答1:

I have added another loader to accept only required node_module by using following.

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;
              }
           }
          }]

来源：https://stackoverflow.com/questions/40649505/error-when-loading-jsx-files-with-curly-braces-inside-jsx

标签

webpack-dev-server