jshbtchr jshbtchr - 3 months ago 21
React JSX Question

Resolving errors with Webpack and ReactJS

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

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