Resolving errors with Webpack and 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?

Mario Tacke · Accepted Answer · 2016-08-19 17:14:15Z

3

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'
    }
  }
]
...

edited Aug 19, 2016 at 17:14

answered Aug 18, 2016 at 19:11

Mario Tacke

5,5073 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hammerabi Over a year ago

json-loader was installed, however I forgot to add it to the configuration. I have now updated the webpack config as you suggested, but I'm still receiving the same error.

Mario Tacke Over a year ago

I edited my answer to replace the | with a \ to escape the . in your babel loader. Make sure to restart your webpack builder after changing your config. Is it still throwing the same error?

hammerabi Over a year ago

I am now getting an unexpected token error, even though the syntax appears correct.. I have updated my webpack.config.js above as per your instructions.

Mario Tacke Over a year ago

That's because we missed a } after the query key (right after the presets). See updated answer.

hammerabi Over a year ago

Also had to change the test: /\.jsx$/ to test: /\.jsx?$/ because it wasn't parsing properly. None the less, all fixed. Hurrah!

Jorawar Singh · Accepted Answer · 2016-08-18 20:58:28Z

0

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'
}

answered Aug 18, 2016 at 20:58

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

Comments

IlangoRajagopal · Accepted Answer · 2016-08-21 07:50:28Z

0

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

edited Aug 21, 2016 at 7:50

answered Aug 19, 2016 at 11:39

IlangoRajagopal

731 gold badge1 silver badge6 bronze badges

1 Comment

Mario Tacke Over a year ago

Your suggested regex is not correct (/.jsx?/). It would match files files ending with ajsx or 0jsx. You have to escape the . like this \.jsx (Add ? for optional x.

Collectives™ on Stack Overflow

Resolving errors with Webpack and ReactJS

3 Answers 3

Example

webpack.config.js

5 Comments

What is error and message

And answer

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example

webpack.config.js

5 Comments

What is error and message

And answer

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related