webpack fails to parse json even with json loader

Question

I'm trying to load a JSON file for the state of my reactjs app, but webpack keeps throwing this error:

ERROR in ./src/data/questions.json
Module parse failed: C:\Users\[...]\myApp\src\data\questions.json
Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)
...

The JSON file is valid, and I'm using the json-loader for webpack, so I'm not sure what the problem is.

Here is my webpack.config.json file:

module.exports = {
  entry: __dirname + '/src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist/js'
  },
  cache: true,
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|\.c9)/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-0']
      }
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }]
  }
};

This is how I'm importing the JSON file:

const quizes = [
  require('./data/questions.json')
];

If I change the above line to:

const quizes = [
  require('json!./data/questions.json')
];

I get a different error:

ERROR in ./~/json-loader!./src/data/questions.json
Module build failed: SyntaxError: Unexpected token m
    at Object.parse (native)
    at Object.module.exports (C:\Users\[...]\myApp\node_modules\json-loader\index.js:7:48)

Where it gets even more strange is, using the above method (json! prefix), the error is thrown right away (during the initial build). However, if I just leave it in the webpack config loaders, the initial build completes without error, but subsequent builds throw the error.

Despite this, my app still works most of the time. What's going on here?

Answer 1

Older question, but you've specified a loader twice: once in webpack.config.js and again with your require. Use one or the other and this should remove the error.