Invariant Violation

[evandavis]

This example throws an invariant violation as well as Warning: React.createElement: type should not be null, undefined, boolean, or number. What am I missing?

import React from 'react';
import I18n, {i18nState} from 'redux-i18n';
import {Provider} from 'react-redux';
import {render} from 'react-dom';

import {combineReducers, createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';

const translations = {
  en: {
    'account.messaging.hub.title': 'Messages'
  }
};

const middleware = applyMiddleware(thunkMiddleware);
const store = createStore(combineReducers({i18nState}), {}, middleware);

render(
  <Provider store={store}>
    <I18n translations={translations}>
      <div>Hello World!</div>
    </I18n>
  </Provider>,
  document.getElementById('pageContainer-content')
);

Package versions:

react@15.2.0
react-dom@15.2.0
redux@3.5.2
react-redux@4.4.5
redux-i18n@1.0.2

[francescarpi]

Hi evandavis,

I can't reproduce your bug. What React version do you have?. Can you show me your store configuration, please?

And finally, are you sure that pageContainer-content exists in your main template?

Best regards.

[evandavis]

@francescarpi I've updated my example to provide a minimum viable demonstration with all the configuration inlined as well as my package versions.

I am certain that pageContainer-content exists.

[evandavis]

Update: if I copy the source directly into my app and reference import I18n from './i18n/component'; I get the intended result. Perhaps there is a problem in the distribution?

Found the issue; opened a PR.

[francescarpi]

Hi evendavis!

Now I have seen that the documentation is wrong because the correct way for package import is:

javascript import {I18n} from 'redux-i18n'

not,

javascript import i18n from 'redux-i18n'

But I like your proposal. Today or tomorrow I'll create a new tag.

Thanks!