-
-
Notifications
You must be signed in to change notification settings - Fork 254
file-loader fails with JSON files in Webpack 4 #259
Comments
I assume this is related to webpack 4 now handling JSON loading natively |
@enjikaka seems bug in |
@webpack-bot move to webpack/webpack |
@see webpack/webpack#6586. Why is the |
For anyone who's encountering the error Simply require your files like this:
Webpack 4.x will do the rest. No special tests, configuration, or loaders are needed for |
Please check the encoding of your .json file. |
@joelcollyer not sure why the down votes on your post as removing the loader in my Webpack config worked for me. I guess the only reason I can think of is it assumes you are using Webpack 4[x]. Again, if you are using Webpack 4[x] @joelcollyer is correct. |
@joelcollyer The only problem with using require() to read JSON files, is that the file will be cached. Unless it's deleted from require()'s cache. |
@BobbyBabes: I fully agree; it'd be best to fetch json with an async request most of the time. In this case we were loading a mandatory language file, so the My point was mostly that no webpack configuration is required for it to understand the loading of a json file (unlike the additional configuration you'd have to do for say, sass, or jsx loading). |
@joelcollyer thank you so much, that tip helped me to fix the bug! |
In my package.json I have: In my webpack.config.js: module.exports = function (env) {
}; After executing:
In my ./public/mydir01/ i see index.html and main.js but extension.json is not moved there.... |
Is there any official documentation on how to output JSON files to my Simply adding |
Correct way to use {
test: /\.json$/,
loader: 'file-loader',
type: 'javascript/auto'
}, |
best wishes, you awesome :))) {
test: /\.json$/,
loader: 'file-loader',
type: 'javascript/auto',
options: {
name() {
return '[path][name].[ext]';
},
},
} |
So I do this, the project build and loads, but it seem the JSON import is undefined like it isn't ready the JSON. is anyone else getting this? Does your application still recognize the JSON values after doing tihs. |
@garkin |
With exclude
|
Adding esModule works best for me. Thank you for the solution
|
This is working for me, my bundle now builds successfully and I have a separate JSON file, but now my app stop working. The js in the bundle that imports the JSON file is only getting a string with the file name instead of the javascript object I was receiving before extracting the JSON file from the bundle. Any idea what can he causing this? |
I had the same problem. For this you have to read the file as a normal text file and transform it at runtime: return Axios.get(`/Config.json`, {
method: 'GET',
}).then(x => {
ConfigService.globalConfig = x.data;
return ConfigService.globalConfig;
}); The thing to consider thou is to ensure this is done before the file is used in code. Note that I spit out the file at the root of the app: {
test: /\Config.json$/,
loader: 'file-loader',
type: 'javascript/auto',
options: {
name(file) {
return '[name].[ext]';
},
},
} |
@Garwin4j thanks for the quick reply, yes I ended loading the failed asyncronously as well. I did it with fetch api and it worked well.
In this example the file is also at the root. |
So, to sum this up: If you want Webpack to load the contents of your JSON, so that you can immediately use it in your code, don't use Example: Your code import languages from './languages.json';
console.log(translations); // { english: 'English', spanish: 'Español' } This method has a downside: The entire contents of the JSON file gets bundled into your app's .js file, which of course makes your app larger. If you want to load your JSON file via AJAX, use Example: Webpack config file {
test: /\.json$/,
loader: 'file-loader',
type: 'javascript/auto'
} Your code import languagesFileUrl from './languages.json';
console.log(languagesFileUrl); // This just returns the URL of your JSON file. For example: '/languages.json'. You should then fetch the file via AJAX.
fetch(languagesFileUrl)
... |
Using
import 'file-loader!./manifest.json';
fails with;Minimal reproducible setup: https://ipfs.io/ipfs/QmPfPq71WD3H6RrcCu1y72FswF8zC3f43aU8FPv5ZwS2ea
The text was updated successfully, but these errors were encountered: