When webpack is not configured to copy translation files from 'public' folder containing 'locales' files to build folder, in browser console we can see above console warnings, which eventually leads to 'missingKey' translation error.

The solution for above issue is to add copy plugin in webpack.config.js

First install package.

npm i copy-webpack-plugin --save-dev

Change webpack.config.js

...
const CopyWebpackPlugin = require('copy-webpack-plugin');
...

plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
...,
new CopyWebpackPlugin([{ from: 'public/locales', to: 'locales' }]),
],

when you next time start webpack dev server the warnings should be gone and i18next should work fine.