Disable Webpack 4 Native JSON Loader

Now that Webpack 4 is out, it supports a plethora of new things and features, one of those is the native handling of JSON. In theory, this is great, but in a particular application I am working with which is JSON heavy, the native JSON loading caused a trove of errors.

Obligatory photo of some code

Fortunately, inside of your module.rules section of webpack.config.js you can disable the native JSON loader and use the json-loader package which seems to be more reliable at present.

Make sure you yarn add json-loader -D (or Npm equivalent) and then add the following rule. This will tell Webpack to use the json-loader plugin.

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

This got me out of a pickle until I can work out what the real issue is (maybe some invalid JSON). Whatever it is, this fixes it.