Cannot read property 'ready' of null in some cases

[nicgirault]

I get an error when using react-i18next in [email protected] dialogs and popover. This bug is not happening in material-ui > 1.0.0 so I don't know who is guilty.

Here is a reproducable example https://codesandbox.io/s/qqor2zv7r4

[jamuhl]

Got no problem with being guilty 😁... but if this does not happen in material-ui 1.0.0 why not just update to that.

my guess is the dialog, popover component using some portal implementation to place the component out of the current render tree not copying over the context or whatever...but anyway call me guilty 😄

If you find anything we could change to make this work anyway without making a complete rewrite i would be happy to accept a PR.

[nicgirault]

upgrading material-ui is time consuming. I'm continuing right now without other solution but this work was not expected so it's quite a pain. Thanks.

[nicgirault]

By the way, how is it that there was no problem before v8?

[jamuhl]

change your i18n.js:

import i18n from "i18next";
import { reactI18nextModule } from "react-i18next";

i18n
  .use(reactI18nextModule)
  .init({
  fallbackLng: "en",
  load: "languageOnly",
  ns: ["common"],
  defaultNS: "common",

  react: {
    wait: true,
    nsMode: "default"
  }
});

export default i18n;

and remove the I18nextProvider -> this way we use internal context that does not get broken by MUI

https://codesandbox.io/s/zrr9xjrjwp

[jamuhl]

Seems the Dialog component somehow breaks using react context.

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project -> there are many ways to help this project 🙏

[WebMobi59]

I am getting same error as well.
I am not sure what is wrong on my side.

App.js

import React from 'react';
import { Animated, Dimensions, StyleSheet, View, Text, AsyncStorage, ToastAndroid } from 'react-native';
import { translate } from 'react-i18next';

import Home from './src/screens/homepg/home'
import HomeUserLogged from './src/screens/homepg/homeLogged'
import Splash from './src/screens/splash/splash'
import GetMembership from './src/screens/membership/getMembership'
import ServiceListByCategoryId from './src/screens/services/serviceList'
import ServiceList_Next_ByCategoryId from './src/screens/services/serviceList_Nest'
import ProductDetails from './src/screens/services/serviceDetails'
import Order_A_Service from './src/screens/services/orderService'
import UserProfile from './src/screens/user/profile'
import EditProfile from './src/screens/user/editProfile'
import MyOrders from './src/screens/orders/myOrders'
import SignInStepOne from './src/screens/signin/signinStepOne'
import SignInStepTwo from './src/screens/signin/signinStepTwo'
import MembershipDetails from './src/screens/membership/membershipDetails'
import { createStackNavigator } from 'react-navigation';

let {width, height} = Dimensions.get('window');

class FirstScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Splash> </Splash>
      </View>
    );
  }
}

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      userLoggedIn : false
    }
    this.compHasMounted = false;
    this.springValue = new Animated.Value(100);
  }

  componentWillUnmount() {
    this.compHasMounted = false
  }

  async componentDidMount(){
    this.compHasMounted = true;
    if (this.compHasMounted == true){
      try{
        var userLogged = await AsyncStorage.getItem("userName")
        if (userLogged != null){
          this.setState({
            userLoggedIn : true
          })
        }  
      } catch(error){
        console.error(error)
      }
    }
  }
  
  render(){
    if (this.state.userLoggedIn){
      return <UserLoggedWrapper /> 
    } else {
      return <DefaultWrapper />
    }
  }
}

var stackNavigationOptions = {
  Splash_Screen: {
    screen : FirstScreen,
    navigationOptions: {
      header: null,
    }
  },
  Home_Screen : Home,
  Home_UserLogged_Screen : HomeUserLogged,
  GetMembership_Screen : GetMembership,
  MembershipDetails_Screen : MembershipDetails,
  ServicesByCategoryId_Screen : ServiceListByCategoryId,
  ServiceNextByCategoryId_Screen : ServiceList_Next_ByCategoryId,
  ProductDetails_Screen : ProductDetails,
  Order_A_Service_Screen : Order_A_Service,
  UserProfile_Screen : UserProfile,
  EditProfile_Screen : EditProfile,
  MyOrders_Screen : MyOrders,
  SignInStepOne_Screen : SignInStepOne,
  SignInStepTwo_Screen : SignInStepTwo,
}

var initialPageOptions = {
  initialRouteName: 'Splash_Screen'
}

var loggedUserPageOptions = {
  initialRouteName: 'Home_UserLogged_Screen'
}


RootStackDefault = createStackNavigator(stackNavigationOptions, initialPageOptions);
RootStackUserLogged = createStackNavigator(stackNavigationOptions, loggedUserPageOptions)

const DefaultWrappedStack = ({t}) => {
  return <RootStackDefault screenProps={{t}} />;
};

const UserLoggedWrappedStack = ({t}) => {
  return <RootStackUserLogged screenProps={{t}} />;
};

const DefaultWrapper = translate('common', {
  bindI18n: 'languageChanged',
  bindStore: false})(DefaultWrappedStack);

const UserLoggedWrapper = translate('common', {
  bindI18n: 'languageChanged',
  bindStore: false})(UserLoggedWrappedStack);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[jamuhl]

@WebMobi59 can you make a more complete sample like @nicgirault did - so I have a chance to reproduce and help?

[WebMobi59]

@jamuhl thanks for your quick reply.
I am using react-i18next as one part of big project, so I can't share full source code here.
https://codesandbox.io/s/q7v40y1m16 ( just included App.js and i18n.js )

Please let me know if you need more info.

[jamuhl]

@WebMobi59 i see...the sample does not really work so there is no change for me to reproduce...

actually you're passing the translations in...could you point me to the line throwing that Cannot read property 'ready' of null in our codebase????

i guess it's that one...https://github.com/i18next/react-i18next/blob/master/src/NamespacesConsumer.js#L146 but makes not much sense that state is null

[WebMobi59]

@jamuhl yes, I am getting error at line 69.

[WebMobi59]

I am referring issue #572 , but no luck yet.

[jamuhl]

will try something...will make a new version guarding against unset state ... my guess is the cause is this: https://github.com/i18next/react-i18next/blob/master/src/NamespacesConsumer.js#L11

[jamuhl]

could you please retry with: [email protected]

[WebMobi59]

@jamuhl I solved this issue by importing i18n.js file.
Thanks for your help.

[jamuhl]

hm...so you just had the i18n.js file around but not imported. That should cost you starring this repo twice 😄

[nabiltkarim]

I am actually facing the same problem but while running unit test on my component. Can you please help regarding this? I am getting this as the error "TypeError: Cannot read property 'wait' of null at NamespacesConsumerComponent.render (node_modules/react-i18next/dist/commonjs/NamespacesConsumer.js:213:33)"

This is my test component. I couldnt share the whole code as its part of a big project.

`

import React from 'react';
import { mount } from 'enzyme';
import { toClass } from 'recompose';
import PersonalDetails, { enhance } from 'pages/personal-info/PersonalDetails';
import { MockedProvider } from 'react-apollo/test-utils';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import * as reduxForm from 'redux-form';

describe('Components', () => {
  const personalDetailsClass = toClass(PersonalDetails);
  const Component = enhance(personalDetailsClass);

  describe('Personal Details', () => {
    let store;
    let wrapper;
    beforeEach(() => {
      const initialState = {
        form: {
          flightDelay: {
            values: {
              personList: {
                0: {
                  firstName: 'John',
                  lastName: 'Far',
                  email: '[email protected]',
                  contactNumber: '062-760-0966',
                  passportNumber: 'bf069245',
                  accountName: 'nabil',
                  bankName: 'KB',
                  accountNumber: '23112412',
                },
                1: {
                  firstName: 'Far',
                  lastName: 'Johnar',
                  passportNumber: 'gf567245',
                },
              },
            },
          },
        },
      };
      const mockStore = configureStore([]);
      store = mockStore(initialState);
      wrapper = mount(
        <MockedProvider>
          <Provider store={store}>
            <Component />
          </Provider>
        </MockedProvider>,
      );
    });

    it('should have two persons when componentDidMount', () => {
      const props = wrapper.find(personalDetailsClass).props();
      console.log(props);
      expect(2).toHaveLength(2);
    });
  });
});

`

[jamuhl]

@nabiltkarim using [email protected] ? not getting a warning no i18n instance is passed around?!? There is no i18n.js loaded no i18n instance passed by i18n.use(reactI18nextModule) -> so that will not work...have a look at: https://github.com/i18next/react-i18next/tree/master/example/test-jest for testing

[nabiltkarim]

Yes using [email protected]. i passed i18n.js following the way you guys did in your last push to this repository. Do i need to create the mock react-i18next and pass i18n.js again inside my test component?

Sorry I am doing unit testing for the first time using this thats why I am very confused.

[jamuhl]

It needs the instance - mock or real...not having that it will not work...don't worry...follow the JEST sample and/or read https://react.i18next.com/misc/testing

[nabiltkarim]

It worked somewhat. Thank you for all the prompt replies and help :)