I18next and Webpack - reactjs

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'