Laravel Mix and Webpack: Cannot Load JSON File (Webpack Adding .js to Filename)

Question

I am getting the following error from Webpack:

ERROR in ./resources/assets/js/data/vehicles.json.js
Module build failed: Error: ENOENT: no such file or directory, open '/Users/path-to-my-app/resources/assets/js/data/vehicles.json.js'

I'm not surprised that the file fails to load. The JSON file is not called vehicles.json.js. It is called vehicles.json.

The line where the file is imported reads:

import vehicleTypes from '../data/vehicles.json'

However, if I change the filename to vehicles.js (and use an export ststement to make it a module) and change the import statement to read:

import vehicleTypes from '../data/vehicles.js'

Webpack works fine.

I was under the impression that the latest webpack could load JSON files without configuring anything.

Devin Norgarb · Accepted Answer · 2018-03-28 22:42:46Z

2

Since webpack >= v2.0.0, importing of JSON files will work by default. You might still want to use this if you use a custom file extension.

You might be using an older version of webpack which would explain why the loader is not working by default.

Try adding it to your webpack.mix.js file as a custom loader.

Install the loader:

npm install --save-dev json-loader

And declare the custom loader:

mix.webpackConfig({
         module: {
           loaders: [{
             test: /\.json$/,
             loader: 'json-loader'
             }]
           }
       });

And you should be able to import .json files as one would expect.

edited Mar 28, 2018 at 22:42

answered Mar 28, 2018 at 22:37

Devin Norgarb

1,17914 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Mix and Webpack: Cannot Load JSON File (Webpack Adding .js to Filename)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related