Webpack-dev-server and i18next-xhr-backend

[mihaibogdan]

I'm trying to integrate react-i18next using i18next-xhr-backend as a loader and webpack-dev-server as a server. The problem I'm facing is that because I'm loading those locales files through XHR, and not through classic imports, they will not appear in the final bundle. Does anyone now how can I serve those locales as static files? What I've tried until now is to copy the files with copy-webpack-plugin but from times to times it gets stuck at 98% and I have this feeling that I'm missing something. Maybe somehow serve the files from memory and keep this approach only for production build?. I will share my webpack configuration.

If someone could help me I would really appreciate, I have no clue how I can tackle this. Any thoughts are welcome.

const config = {
  mode: 'development',
  entry: ['./src/index.tsx'],
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    publicPath: '/',
  },
  ...
  plugins: [
    new CopyPlugin(
      [
        {
          from: './src/locales',
          to: '../build/locales',
          toType: 'dir',
          force: true,
        },
      ],
      { copyUnmodified: true }
    ),
  ],
  devServer: {
    port: 3000,
    historyApiFallback: true,
    hot: true,
  },
} 

[jamuhl]

not maintaining the copyplugin -> you might ask there why it fails...

we move the locales to the /public folder that gets copied on build as is: https://github.com/i18next/react-i18next/tree/master/example/react/public/locales

[mihaibogdan]

But that only happens on build, right?

I was wondering how would you suggest to move the locales folder when you have a webpack-dev-server. An alterantive of copy-webpack-plugin. I feel that this is a common case and I am missing something.

[jamuhl]

there is only one thing: it must be accessible by xhr independent of production or development...

i don't see your issue...either you go with the defaults react-script provides you or you look yourself webpack is configured correctly.

[mihaibogdan]

Yeah, it was my fault. I didn't understand very well but now it's clearer. Thanks! I will close this topic since it's not an issue.

On a side note, you're doing a very nice job with i18next. A lot of useful features. Congrats!

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

If you liked my support / work - I would enjoy a coffee sponsored using the “:purple_heart:Sponsor Button”.

There are many ways to help this project :pray:

[alexmarles]

Hello @mihaibogdan. Could you please share how did you manage to do it? I am trying something similar and I could use some examples. Thanks!