Incompatible with hot module reload?

First of all, thank you for this work, 😄 it really looks a lot easier to use than react-intl which I find a little overkill for a simple app.

I have a translated view that goes like this:

import React from 'react';
import { translate } from 'react-i18next/lib';

const LoginForm = React.createClass({
    render() {
        const t = this.props.t;
        console.log(t); // <-- we should have the translation fn here
        return (
            <div>
                <h3>{ t('Sign in')}</h3>
                {/*...*/}
            </div>
        );
    }
});

export default translate(['login'])(LoginForm);

On first load and manual reload it works as advertised, displaying the translated message. The console.log(t) call returns something like function fixedT(key, options) {...}, but when I modify something on the component and thus triggering the hot reload module (Webpack), I get undefined and an Uncaught TypeError: t is not a function.

Is there any way to make react-i18next compatible with HMR?

Thanks!

[jamuhl]

@gnapse you mean if you change something in the translation files you want the hmr to reload your page…not sure if that is possible…as those files are not part of the bundle.

I think the initial issue was a reload based on a change in the component…not translation files.

Personally we moved our translation to the service tier locize.com - so we do no manipulations of translations anymore inside the project repository.

Rather sure there is a way to trigger hmr doing some configurations to watch for the public folder too…but personally i prefer doing create-react-app init - so i might have less knowledge about webpack config…eventual this is a good question for stackoverflow?

[hollanderbart]

I got it working. Finally. Via this post: https://github.com/i18next/react-i18next/issues/3, I was mentioned this post: https://github.com/ghengeveld/redux/blob/a68768ff8d6a4fbe7b8f6a06a8cf9b99a54aefb0/docs/recipes/WritingTests.md#testing-decorated-react-components

Basically, because in order to test the undecorated component and not the decorated translate component, I had to export the component using: export class ComponentName extends Component { ... } next to the export default translate('common')(ComponentName) at the bottom. Because I export the undecorated component next to the decorated component, I can import the undecorated component in my unit test using import { FilterRow } from '../components/filterRow'; instead of import FilterRow from '../components/filterRow';