使用Webpack和ReactJS解决错误

Question

I've read lots of other S/O posts that detail a similar problem, however I cannot find a solution for my specific issue.

I installed a node module, but I am now receiving this error message:

(syllable - is the module I installed)

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.

Here is my Webpack config

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;

Note: I have es2015 installed, and I have tried re-writing the webpack.config.js several times to no avail.

What am I doing incorrectly?

Answer 1

It is trying to load a .json file. You currently do not have a json-loader setup to handle this sort of thing. Have a look at json-loader .

Example

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

What is error and message

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 typ

And answer

You should really read it, It clearly says that Module parse failed. It gave you file name and told you that You may need an appropriate loader to handle this file typ

json-loader what you need

install json-loader with npm and add it to your config.

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

Answer 3

Currently your regular expression does not match any file extension. If you're trying to test both .js and .jsx file remove the last $ and replace it with ? and remove the | .

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

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