具有反应模块的Webpack提供意外令牌 [英] Webpack with react modules giving unexpected token

问题描述

尝试使用react-spin npm模块，但是当我尝试使用webpack构建bundle.js时，我收到以下错误：

Been trying to use the react-spin npm module, but when I try and build a bundle.js with webpack, I receive the following error:

Module parse failed: /Users/nir/browsewidget/node_modules/react-spin/src/main.js Line 29: Unexpected token <
You may need an appropriate loader to handle this file type.
|   render: function() {
|     return (
|       <span ref="container" />
|     );
|   }
 @ ./js/widget.jsx 4:14-35

我在猜这个模块里面有jsx，但是我不明白它为什么不能构建？在构建捆绑包时，react-spin是否需要一些额外的配置？

I am guessing that this module has jsx in it, but I don't understand why it can't be built? Does react-spin need some extra configuration when building a bundle?

这是我的完整 webpack.config.js ：

module.exports = {
    entry: "./js/widget.jsx",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                    test: /\.jsx$/, 
                    loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            }
        ]
    },
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['','.js','.jsx']
    }
};

推荐答案

您的加载程序配置为仅转换以文件结尾的文件 .jsx ：

Your loader is configured to only transform files that end in .jsx:

 test: /\.jsx$/,

（美元符号表示字符串结束。）

(The dollar sign means end-of-string.)

您可以将其更改为

test: /\.jsx?$/,

转换 .js 和 .jsx 文件，但通过JSX加载程序运行 node_modules 中的每个JavaScript文件可能会相当慢。

to transform both .js and .jsx files, but running every JavaScript file in node_modules through the JSX loader will probably be fairly slow.

我相信您应该能够设置 / node_modules / 的 exclude 选项，然后您关心的特定模块的 include 选项（ react-spin ），但最佳解决方案是不使用的包已发布的JavaScript版本中的JSX（ react-spin 的作者）可能会对此效果的拉取请求开放。 （编辑：似乎已有一个，请参阅 thomasboyt / react-spin＃3 ）

I believe you should be able to set an exclude option of /node_modules/ and then an include option for the specific module you care about (react-spin), but the best solution is that packages not use JSX in the published version of the JavaScript—the author of react-spin might be open to a pull request to this effect. ( it appears there already is one, see thomasboyt/react-spin#3)

最后， react-spin 非常小，所以你可以考虑在自己的项目中自己实现它（这样你就不必担心了） webpack loader问题。）

Finally, react-spin is very small, so you man consider implementing it yourself in your own project (so that you don't have to worry about the webpack loader issues).

这篇关于具有反应模块的Webpack提供意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！