-
-
Save florentdestremau/0e7233a5c8a934f4d29bb01026978da9 to your computer and use it in GitHub Desktop.
| import i18n from 'i18next'; | |
| import { initReactI18next } from 'react-i18next'; | |
| import frYaml from 'js-yaml-loader!../translations/messages.fr.yml'; | |
| import enYaml from 'js-yaml-loader!../translations/messages.en.yml'; | |
| const splitPlurals = (object) => { | |
| const newObject = {}; | |
| Object.keys(object).forEach((key) => { | |
| let elem = object[key]; | |
| if (typeof elem === 'object') { | |
| newObject[key] = splitPlurals(elem); | |
| return; | |
| } | |
| // replace all symfony parameters %param% with {{param}} in all strings for js | |
| elem = String(elem).replace(/%([^%]+(?=%))%/gi, '{{$1}}'); | |
| // splits all plurales like "one apple|many apples" into different keys apple and apple_plural | |
| if (typeof elem === 'string' && elem.includes('|')) { | |
| const plural = elem.split('|'); | |
| newObject[key] = plural.shift(); | |
| newObject[`${key}_plural`] = plural.shift(); | |
| return; | |
| } | |
| newObject[key] = elem; | |
| }); | |
| return newObject; | |
| }; | |
| i18n | |
| .use(initReactI18next) | |
| .init({ | |
| resources: { | |
| fr: { | |
| translation: splitPlurals(frYaml), | |
| }, | |
| en: { | |
| translation: splitPlurals(enYaml), | |
| }, | |
| }, | |
| lng: (window && window.locale) || 'fr', | |
| fallbackLng: 'fr', | |
| // keySeparator: false, // don't count "." as separator | |
| }); | |
| export default i18n; |
your structure should be something like this:
- react/i18n.js
- translations/messages.en.yaml
- translations/messages.fr.yaml
You are correct,
my paths were wrong, now its working thanks !
Hello,
Do you have any idea why this error occured please ?
I don't understand and would be grateful if you can help me =) :
Module build failed: Error: Final loader didn't return a Buffer or String
at /home/node/app/node_modules/webpack/lib/NormalModule.js:204:46
at /home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at runSyncOrAsync (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at iterateNormalLoaders (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array. (/home/node/app/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/home/node/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
at /home/node/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
at /home/node/app/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
@ ./assets/js/react/utils/i18n.js 5:0-79
@ ./assets/js/react/cooking/recipe/components/List.jsx
@ ./assets/js/react/cooking/recipe/RecipeRegistration.js
@ ./assets/js/react/cooking/registration.js
@ ./assets/js/react/registration.js
error in ./translations/messages.fr.yml
iterator is not a function
@ ./assets/js/react/utils/i18n.js 5:0-79
@ ./assets/js/react/cooking/recipe/components/List.jsx
@ ./assets/js/react/cooking/recipe/RecipeRegistration.js
@ ./assets/js/react/cooking/registration.js
@ ./assets/js/react/registration.js
P.S : I try to use translation into a jsx file, so, i just import i18n file in jsx file, just after "import { useTranslation } from 'react-i18next';"
e.g. :
import { useTranslation } from 'react-i18next';
import '../../../utils/i18n';
export default function List({ recipes }) {...
Hmm, finaly, i just solve the prb with change js-yaml-loader install command in my DockerFile with adding --save (i don't have idea what that's change anything) and rebuild and restart my container.
But i've always one prb : in i18n.js file, "window !== undefined && window.locale)" cause an error : window is not defined 🤔
oh this is custom code for me, you can remove this line and hard-code your default lng
Ah yes, ok, thx for your help and thx you for your quick response :)
Hi,
Do you have any idea why this is throwing an error ?
Any help would be appreciated :)
`These dependencies were not found:
To install them, you can run: npm install --save js-yaml-loader!../translations/messages+intl-icu.en.yaml js-yaml-loader!../translations/messages+intl-icu.fr.yaml`