How to split a folder of JSON files outside of the main bundle of a React + Webpack v4 app?

60 Views Asked by At

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?

0

There are 0 best solutions below