在 jsx 中加载带花括号的 jsx 文件时出错 [英] Error when loading jsx files with curly braces inside jsx

问题描述

我的 .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>)
    }
});

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

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

我收到以下错误.

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)是花括号{.我需要使用任何其他加载程序吗?

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

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

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?

推荐答案

我添加了另一个加载器，使用以下方法只接受所需的 node_module.

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

这篇关于在 jsx 中加载带花括号的 jsx 文件时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！