实施例

Question

我已经阅读了许多详细说明类似问题的其他S / O帖子，但是我找不到针对我的具体问题的解决方案。

我安装了一个节点模块，但我现在收到此错误消息：

（音节 - 是我安装的模块）

index.js:641 ./~/syllable/problematic.json
Module parse failed: /Desktop/App/node_modules/syllable/problematic.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.

这是我的Webpack配置

var config = {
    entry: './main.js',

    output: {
      path: './',
      filename: 'index.js',
    },

    devServer: {
      inline: true,
      port: 3000
    },

    module: {
      loaders: [
        {
          test: /\.jsx$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: ['es2015', 'react']
        },
        {     //<-- this line is throwing an unexpected token error
          test: /\.json$/,
          loader: 'json'
        }
      }
    ]
  }
}

module.exports = config;

注意：我安装了es2015，并且我尝试过多次重写webpack.config.js无济于事。

我做错了什么？

Answer 1

正在尝试加载.json文件。您目前没有json-loader设置来处理此类事情。看看json-loader。

实施例

npm install --save-dev json-loader

webpack.config.js

...
module: {
  loaders: [
    {
      test: /\.jsx$/,
      exclude: /node_modules/,
      loader: 'babel',

      query: {
        presets: ['es2015', 'react']
      }
    },
    {
      test: /\.json$/,
      loader: 'json'
    }
  }
]
...

Answer 2

什么是错误和消息

index.js：641 ./~/syllable/problematic.json模块解析失败： /Desktop/App/node_modules/syllable/problematic.json意外的令牌（2:11）你可能需要一个合适的加载器来处理这个文件typ

并回答

你应该读它，它清楚地说模块解析失败了。它给你文件名并告诉你 你可能需要一个合适的加载器来处理这个文件

json-loader 您需要什么

使用npm安装json-loader并将其添加到您的配置中。

{
  test: /\.json$/,
  loader: 'json'
}

Answer 3

目前，您的正则表达式与任何文件扩展名都不匹配。如果您尝试同时测试.js和.jsx文件，请删除最后一个$并将其替换为?并删除|。

module:{
    loaders: [
        {
            test: /\.jsx?/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}

使用Webpack和ReactJS解决错误

3 个答案:

实施例

webpack.config.js

什么是错误和消息

并回答