gulp: Module parse failed - json

Question

I'm working with Laravel 5.3.
Errors I get after installing node-uuid.
{ [Error: ./~/diffie-hellman/lib/primes.json
Module parse failed: /var/www/html/filecloudprod/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
My package.json file. Note json-loader
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"dropzone": "^4.3.0",
"animate.css": "^3.5.0",
"node-uuid": "^1.4.7",
"json-loader": "^0.5.4"
}
}
Then tried to merge webpack config like this in gulpfile.
I tried 2 different approaches, see TRY1 and TRY2, certainly not at the same time, just posted both approaches.
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
// TRY 1
elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
// TRY 2
elixir.ready(() => {
elixir.config.js.webpack = {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
elixir(function (mix) {
mix.sass('app.scss');
mix.webpack('app.js');
mix.browserSync({
proxy: 'filecloud.dev'
});
mix.version(['css/app.css', 'js/app.js']);
});
But I still get the error.
Full error

Answer 1

If you want to use npm modules which requires the json-loader, this is the solution.
Add following to package.json file.
"json-loader": "^0.5.4"
Create webpack.config.js with the following code:
Elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
Now you can require packages in your bootstrap.js file which require the json-loader.
Additional Notes
When you look to the index.js file where the webpack method of elixir is defined, you see that the json loader is missing inside the loaders array.
module: {
loaders: [{ test: /\.js$/, loader: 'buble', exclude: /node_modules/ }]
},