Module build failed: SyntaxError: Unexpected token ' in JSON at position 0

Question

I have here a webpack config, I am trying to add moment-timezone with an answer How should I use moment-timezone with webpack?, which led me to Webpack - Error: Cannot define 'query' and multiple loaders in loaders list

var webpack = require('webpack');

module.exports = {
  //devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/main.js'
  ],
  output: {
    path: require("path").resolve('./assets'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  externals: {
      jquery: 'var jQuery'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['json-loader', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=react-hmre'],
        exclude: /node_modules/
      }
    ]
  }
};

My current attempt is above.

Answer 1

You're telling webpack to pass your JavaScript files to the json-loader. But because JavaScript files are not valid JSON, you get the error that there is an unexpected token already at the first character.

{
  test: /\.jsx?$/,
  loaders: ['json-loader', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=react-hmre'],
  exclude: /node_modules/
}

So you need to remove the json-loader from the .jsx? configuration. Additionally json-loader isn't require anymore in webpack 2 and JSON files should just work out of the box.

You can update the module section to:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=react-hmre',
      exclude: /node_modules/
    }
  ]
}

But just in case it shouldn't work, you would have to add the json-loader for files ending in .json:

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