I18next and Webpack

Question

I'm starting with Webpack and find problem with react i18next hook-useTranslation.

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
    output: { 
        path: path.join(__dirname, '/dist'),
        filename: 'index.bundle.js'
    },
    devServer: {
        port: 3000,
        host: 'localhost',
        watchContentBase: true,
      
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /nodeModules/,
                use: {
                    loader: "babel-loader"
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(
            { 
                template: './src/index.html' 
            }
        ),
        new CopyPlugin({
            patterns: [
                {
                    from: path.join(__dirname, '/public') , to: path.join(__dirname, '/dist') // copy public folder, which contains locales for i18next
                }
            ]
        })
    ],
}

//i18next.js
import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpApi from 'i18next-http-backend' 

i18next
  .use(initReactI18next)
  .use(HttpApi)
  .init(
    {
      backend: {
        loadPath: '/locales/{{lng}}/{{ns}}.json'
      },
      lng: "en_GB",
      supportedLngs: ["en_GB","cs_CZ"]
  })

export default i18next

//example.js
import React from 'react'

import { useTranslation } from 'react-i18next'

const Greeting = () => {
    const { t } = useTranslation()

    return (
        <div>
            {/* {t("common:greeting")} */}
        </div>
    )
}

export default Greeting

In browser nothing loads and in console print these errors

[WDS] Disconnected!
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ...

I want have locales in public folder, not in assets, acording docs, it's better to keep code separated from translations. I tried everything, but I can't find any solution. Someone had a similar problem?

Answer 1

You didnt define a namespace, so loadPath: '/locales/{{lng}}/{{ns}}.json' wont find {{ns}}.json because you said that you have to find {t("common:greeting")}, the namespace that you are searching for is common .So in order to fix this change the loadPath: '/locales/{{lng}}/common.json'