Created
February 18, 2020 15:32
-
-
Save florentdestremau/0e7233a5c8a934f4d29bb01026978da9 to your computer and use it in GitHub Desktop.
Simple conversion script to import a Symfony-Yaml file into a React-i18n project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
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 :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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. :