Setting i18n debug to true reveals several potential issues

[nvonsternberg]

Describe the bug Setting debug to true in modules/i18n/common-react/init.ts reveals the the following potential issues:

1. It apperas that i18n is initialized twice server-side
2. i18n language changed gets called multiple times for the same language
3. I get three errors per initialization i18next::languageUtils: rejecting non-whitelisted language code: en
4. The above errors seem to increase over time without further changes to code

To Reproduce Steps to reproduce the behavior:

1. clone apollo-universal-starter-kit
2. change debug to true (line 12 modules/i18n/common-react/init.ts)
3. yarn
4. yarn seed
5. yarn watch
6. observe console output
7. Close the browser and console then run yarn watch again and observe more error messages

Expected behavior

1. Expected that i18n would be initialized only once
2. Expected that the language is only changed in the case that a new language setting is submitted
3. Expected that the whitelist error message indicates an error in the project somewhere since language is set to 'en-US', not 'en'
4. Expected the result to be the same for first runs and subsequent runs

I tried to debug to achieve expected behavior to no success

Screenshots

server:   debug: true,
server:   initImmediate: false,
server:   ns: [
server:     'translation',  'user',
server:     'validation',   'clientCounter',
server:     'reduxCounter', 'serverCounter',
server:     'counter',      'post',
server:     'upload',       'contact',
server:     'pagination',   'PrintReport',
server:     'PdfReport',    'ExcelReport',
server:     'report',       'notFound',
server:     'auth',         'stripeSubscription',
server:     'chat',         'reports'
server:   ],
server:   defaultNS: [ 'translation' ],
server:   fallbackLng: [ 'en-US' ],
server:   fallbackNS: false,
server:   whitelist: [ 'en-US', 'ru-RU', 'cimode' ],
server:   nonExplicitWhitelist: false,
server:   load: 'all',
server:   preload: [ 'en-US', 'ru-RU' ],
server:   simplifyPluralSuffix: true,
server:   keySeparator: '.',
server:   nsSeparator: ':',
server:   pluralSeparator: '_',
server:   contextSeparator: '_',
server:   saveMissing: false,
server:   updateMissing: false,
server:   saveMissingTo: 'fallback',
server:   saveMissingPlurals: true,
server:   missingKeyHandler: false,
server:   missingInterpolationHandler: false,
server:   postProcess: false,
server:   returnNull: true,
server:   returnEmptyString: true,
server:   returnObjects: false,
server:   joinArrays: false,
server:   returnedObjectHandler: [Function: returnedObjectHandler],
server:   parseMissingKeyHandler: false,
server:   appendNamespaceToMissingKey: false,
server:   appendNamespaceToCIMode: false,
server:   overloadTranslationOptionHandler: [Function: handle],
server:   interpolation: {
server:     escapeValue: true,
server:     format: [Function: format],
server:     prefix: '{{',
server:     suffix: '}}',
server:     formatSeparator: ',',
server:     unescapePrefix: '-',
server:     nestingPrefix: '$t(',
server:     nestingSuffix: ')',
server:     maxReplaces: 1000
server:   },
server:   resources: {
server:     'en-US': {
server:       user: [Object],
server:       validation: [Object],
server:       clientCounter: [Object],
server:       reduxCounter: [Object],
server:       serverCounter: [Object],
server:       counter: [Object],
server:       post: [Object],
server:       upload: [Object],
server:       contact: [Object],
server:       pagination: [Object],
server:       PrintReport: [Object],
server:       PdfReport: [Object],
server:       ExcelReport: [Object],
server:       report: [Object],
server:       notFound: [Object],
server:       auth: [Object],
server:       stripeSubscription: [Object],
server:       chat: [Object],
server:       reports: {}
server:     },
server:     'ru-RU': {
server:       user: [Object],
server:       validation: [Object],
server:       clientCounter: [Object],
server:       reduxCounter: [Object],
server:       serverCounter: [Object],
server:       counter: [Object],
server:       post: [Object],
server:       upload: [Object],
server:       contact: [Object],
server:       pagination: [Object],
server:       PrintReport: [Object],
server:       PdfReport: [Object],
server:       ExcelReport: [Object],
server:       report: [Object],
server:       notFound: [Object],
server:       auth: [Object],
server:       stripeSubscription: [Object],
server:       chat: [Object],
server:       reports: {}
server:     }
server:   },
server:   detection: { lookupCookie: 'lang' },
server:   isClone: true
server: }
server: i18next: languageChanged en-US
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next: initialized {
server:   debug: true,
server:   initImmediate: false,
server:   ns: [
server:     'translation',  'user',
server:     'validation',   'clientCounter',
server:     'reduxCounter', 'serverCounter',
server:     'counter',      'post',
server:     'upload',       'contact',
server:     'pagination',   'PrintReport',
server:     'PdfReport',    'ExcelReport',
server:     'report',       'notFound',
server:     'auth',         'stripeSubscription',
server:     'chat',         'reports'
server:   ],
server:   defaultNS: [ 'translation' ],
server:   fallbackLng: [ 'en-US' ],
server:   fallbackNS: false,
server:   whitelist: [ 'en-US', 'ru-RU', 'cimode' ],
server:   nonExplicitWhitelist: false,
server:   load: 'all',
server:   preload: [ 'en-US', 'ru-RU' ],
server:   simplifyPluralSuffix: true,
server:   keySeparator: '.',
server:   nsSeparator: ':',
server:   pluralSeparator: '_',
server:   contextSeparator: '_',
server:   saveMissing: false,
server:   updateMissing: false,
server:   saveMissingTo: 'fallback',
server:   saveMissingPlurals: true,
server:   missingKeyHandler: false,
server:   missingInterpolationHandler: false,
server:   postProcess: false,
server:   returnNull: true,
server:   returnEmptyString: true,
server:   returnObjects: false,
server:   joinArrays: false,
server:   returnedObjectHandler: [Function: returnedObjectHandler],
server:   parseMissingKeyHandler: false,
server:   appendNamespaceToMissingKey: false,
server:   appendNamespaceToCIMode: false,
server:   overloadTranslationOptionHandler: [Function: handle],
server:   interpolation: {
server:     escapeValue: true,
server:     format: [Function: format],
server:     prefix: '{{',
server:     suffix: '}}',
server:     formatSeparator: ',',
server:     unescapePrefix: '-',
server:     nestingPrefix: '$t(',
server:     nestingSuffix: ')',
server:     maxReplaces: 1000
server:   },
server:   resources: {
server:     'en-US': {
server:       user: [Object],
server:       validation: [Object],
server:       clientCounter: [Object],
server:       reduxCounter: [Object],
server:       serverCounter: [Object],
server:       counter: [Object],
server:       post: [Object],
server:       upload: [Object],
server:       contact: [Object],
server:       pagination: [Object],
server:       PrintReport: [Object],
server:       PdfReport: [Object],
server:       ExcelReport: [Object],
server:       report: [Object],
server:       notFound: [Object],
server:       auth: [Object],
server:       stripeSubscription: [Object],
server:       chat: [Object],
server:       reports: {}
server:     },
server:     'ru-RU': {
server:       user: [Object],
server:       validation: [Object],
server:       clientCounter: [Object],
server:       reduxCounter: [Object],
server:       serverCounter: [Object],
server:       counter: [Object],
server:       post: [Object],
server:       upload: [Object],
server:       contact: [Object],
server:       pagination: [Object],
server:       PrintReport: [Object],
server:       PdfReport: [Object],
server:       ExcelReport: [Object],
server:       report: [Object],
server:       notFound: [Object],
server:       auth: [Object],
server:       stripeSubscription: [Object],
server:       chat: [Object],
server:       reports: {}

After closing the browser tab and closing yarn (ctrl-C) and running yarn watch again I get more error output:

server: i18next: initialized {
server:   debug: true,
server:   initImmediate: false,
server:   ns: [
server:     'translation',  'user',
server:     'validation',   'clientCounter',
server:     'reduxCounter', 'serverCounter',
server:     'counter',      'post',
server:     'upload',       'contact',
server:     'pagination',   'PrintReport',
server:     'PdfReport',    'ExcelReport',
server:     'report',       'notFound',
server:     'auth',         'stripeSubscription',
server:     'chat',         'reports'
server:   ],
server:   defaultNS: [ 'translation' ],
server:   fallbackLng: [ 'en-US' ],
server:   fallbackNS: false,
server:   whitelist: [ 'en-US', 'ru-RU', 'cimode' ],
server:   nonExplicitWhitelist: false,
server:   load: 'all',
server:   preload: [ 'en-US', 'ru-RU' ],
server:   simplifyPluralSuffix: true,
server:   keySeparator: '.',
server:   nsSeparator: ':',
server:   pluralSeparator: '_',
server:   contextSeparator: '_',
server:   saveMissing: false,
server:   updateMissing: false,
server:   saveMissingTo: 'fallback',
server:   saveMissingPlurals: true,
server:   missingKeyHandler: false,
server:   missingInterpolationHandler: false,
server:   postProcess: false,
server:   returnNull: true,
server:   returnEmptyString: true,
server:   returnObjects: false,
server:   joinArrays: false,
server:   returnedObjectHandler: [Function: returnedObjectHandler],
server:   parseMissingKeyHandler: false,
server:   appendNamespaceToMissingKey: false,
server:   appendNamespaceToCIMode: false,
server:   overloadTranslationOptionHandler: [Function: handle],
server:   interpolation: {
server:     escapeValue: true,
server:     format: [Function: format],
server:     prefix: '{{',
server:     suffix: '}}',
server:     formatSeparator: ',',
server:     unescapePrefix: '-',
server:     nestingPrefix: '$t(',
server:     nestingSuffix: ')',
server:     maxReplaces: 1000
server:   },
server:   resources: {
server:     'en-US': {
server:       user: [Object],
server:       validation: [Object],
server:       clientCounter: [Object],
server:       reduxCounter: [Object],
server:       serverCounter: [Object],
server:       counter: [Object],
server:       post: [Object],
server:       upload: [Object],
server:       contact: [Object],
server:       pagination: [Object],
server:       PrintReport: [Object],
server:       PdfReport: [Object],
server:       ExcelReport: [Object],
server:       report: [Object],
server:       notFound: [Object],
server:       auth: [Object],
server:       stripeSubscription: [Object],
server:       chat: [Object],
server:       reports: {}
server:     },
server:     'ru-RU': {
server:       user: [Object],
server:       validation: [Object],
server:       clientCounter: [Object],
server:       reduxCounter: [Object],
server:       serverCounter: [Object],
server:       counter: [Object],
server:       post: [Object],
server:       upload: [Object],
server:       contact: [Object],
server:       pagination: [Object],
server:       PrintReport: [Object],
server:       PdfReport: [Object],
server:       ExcelReport: [Object],
server:       report: [Object],
server:       notFound: [Object],
server:       auth: [Object],
server:       stripeSubscription: [Object],
server:       chat: [Object],
server:       reports: {}
server:     }
server:   },
server:   detection: { lookupCookie: 'lang' },
server:   isClone: true
server: }
server: i18next: languageChanged en-US
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next: languageChanged en-US
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::translator: missingKey en-US clientCounter loading loading
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::translator: missingKey en-US serverCounter loading loading
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next: languageChanged en-US
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next: languageChanged en-US
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en
server: i18next::languageUtils: rejecting non-whitelisted language code: en

Desktop (please complete the following information): OS: MacOS 12 and Manjaro Browser: Chrome and Firefox

Smartphone (please complete the following information): N/A

Additional context It seems that the i18n module is rendered numerous times server-side per page load, not sure if that's the chicken or egg in this situation. You can add a console.log statement in the render() function of the i18n module to verify multiple renders.

Thanks for your help and apologies in advance of any of this is normal behavior.