CODEWITHSUNDEEP
javascriptlaravelwebpacklaravel-mix
voidstate
voidstate

Reputation: 7990

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

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.

Upvotes: 0

Views: 1635

Answers (1)

Devin Norgarb
Devin Norgarb

Reputation: 1159

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.

Upvotes: 2

Related Questions