[BUG] i18n instance is destroyed when inistializing formio

[rsm23]

I have a reract project, where I'm inistializing i18n like so :

//// index.js
import React from 'react';
import ReactDom from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { I18nextProvider } from 'react-i18next';

import { i18nClient } from './i18n';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';

const root = document.createElement('div');
root.id = 'root';
document.body.appendChild(root);

const render = (Component) => {
    const rootElement = document.getElementById('root');
    ReactDom.render(
		<AppContainer>
			<I18nextProvider i18n={i18nClient}>
				<Component />
			</I18nextProvider>
		</AppContainer>,
		rootElement,
	);
};

render(App);
if (module.hot) {
    module.hot.accept('./containers/App', () => {
        render(App);
    });
}
registerServiceWorker();




//// i18nClient.js
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { translation, translationFr } from '../locales';
/**
 * Client Side Load
 */
const i18nClient = i18n
	// .use(XHR)
	.use(LanguageDetector)
	.init({
		load: 'all',
		whitelist: ['fr', 'fr-FR', 'en', 'en-US'],
		nonExplicitWhitelist: false,
		lngs: ['fr-FR', 'en-US'],
		fallbackLng: 'fr-FR',
		interpolation: {
			escapeValue: false, // not needed for react!!
		},
		react: {
			wait: true, // set to true if you like to wait for loaded in every translated hoc
			nsMode: 'default', // set it to fallback to let passed namespaces to translated hoc act as fallbacks
		},
		defaultNS: 'rsss',
		resources: {
			fr: {
				'rsss': translationFr,
			},
			'fr-FR': {
				'rsss': translationFr,
			},
			en: {
				'rsss': translation,
			},
			'en-US': {
				'rsss': translation,
			},
		},
	});

export default i18nClient;

But When I call my component which contains the formio component :

import React, { Component } from 'react';
import { Form } from 'react-formio';

export default class FormioComponent extends Component {
	render() {
        let{ form } = this.props;
        return (
			<>
				<Form
					src={form}
					onSubmit={submission => {
						console.log(submission);
					}}
					onChange={schema => console.log(schema)}
				/>
			</>
		);
	}
}

All my translations are broken, is there a way to fix this, or even to disable the formio i18n package?

[alexandraRamanenka]

Try to pass your i18n instance to the Form component like so:

const options = {
    i18next: youri18nInstance
};
<Form
    src={form}
    onSubmit={submission => {
        console.log(submission);
    }}
    onChange={schema => console.log(schema)}
    options={options}
/>

[rsm23]

Try to pass your i18n instance to the Form component like so:

const options = {
    i18next: youri18nInstance
};
<Form
    src={form}
    onSubmit={submission => {
        console.log(submission);
    }}
    onChange={schema => console.log(schema)}
    options={options}
/>

When I pass my instance t form io I got this error :

And Here is the code responsible for the error :

[alexandraRamanenka]

Oh, it's because i18next.init(...) returns a promise. You can pass resources to options instead. Like so:

const options = {
    i18next: {
        resources: { ...resources you passed to i18next.init() }
    }
}

[TanyaGashtold]

I am closing the issue as it was created too long ago and there is no new comments here. If the issue is not resolved, please reopen it. Thanks!