I have a multi-language app where text files are stored as src/dev/translations/${language}.json and I'm currently trying to split all of them into a separate chunk to lower main bundle size.
This is what I added in my Webpack config. I'm currently using React v16.14.0, Webpack v4.44.2 and json-loader v0.5.7.
module: {
rules: [
{
// Match translations json files
test: /^.*\/translations\/.*\.json$/,
loader: 'json-loader'
}
]
}
And this is how it is imported in the app:
import('src/dev/translations/${language}.json')
.then((translationsJSONData) => {
setTranslationsData(translationsJSONData)
})
When I run npm run build I see that it successfully splitted the main bundle, reducing its size. But when I run npm run start I'm getting the following error:
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"c...'
at JSON.parse (<anonymous>)
./src/dev/translations/en-gb.json
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"m...'
File was processed with these loaders:
* ./node_modules/json-loader/index.js
You may need an additional loader to handle the result of these loaders.
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"m...'
at JSON.parse (<anonymous>)
What am I missing here?