Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'ready' of null in some cases #615

Closed
nicgirault opened this issue Nov 12, 2018 · 21 comments
Closed

Cannot read property 'ready' of null in some cases #615

nicgirault opened this issue Nov 12, 2018 · 21 comments
Assignees

Comments

@nicgirault
Copy link

@nicgirault nicgirault commented Nov 12, 2018

I get an error when using react-i18next in material-ui@0.20.2 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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 12, 2018

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

This comment has been minimized.

Copy link
Author

@nicgirault nicgirault commented Nov 12, 2018

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

This comment has been minimized.

Copy link
Author

@nicgirault nicgirault commented Nov 12, 2018

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

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 12, 2018

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 12, 2018

Seems the Dialog component somehow breaks using react context.

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 12, 2018

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 🙏

@jamuhl jamuhl self-assigned this Nov 12, 2018
@WebMobi59

This comment has been minimized.

Copy link

@WebMobi59 WebMobi59 commented Nov 13, 2018

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 13, 2018

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

@WebMobi59

This comment has been minimized.

Copy link

@WebMobi59 WebMobi59 commented Nov 13, 2018

@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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 13, 2018

@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

This comment has been minimized.

Copy link

@WebMobi59 WebMobi59 commented Nov 13, 2018

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

@WebMobi59

This comment has been minimized.

Copy link

@WebMobi59 WebMobi59 commented Nov 13, 2018

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

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 13, 2018

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 13, 2018

could you please retry with: react-i18next@8.3.8

@WebMobi59

This comment has been minimized.

Copy link

@WebMobi59 WebMobi59 commented Nov 13, 2018

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

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 13, 2018

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

@nabiltkarim

This comment has been minimized.

Copy link

@nabiltkarim nabiltkarim commented Nov 14, 2018

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: 'abc@gmail.com',
                  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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 14, 2018

@nabiltkarim using react-i18next@8.3.8 ? 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

This comment has been minimized.

Copy link

@nabiltkarim nabiltkarim commented Nov 14, 2018

Yes using react-i18next@8.3.8. 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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Nov 14, 2018

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

This comment has been minimized.

Copy link

@nabiltkarim nabiltkarim commented Nov 14, 2018

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

@jamuhl jamuhl closed this Nov 15, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.