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.

Sign up for GitHub

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

Jump to bottom

Modify I18nProvider so that it does not generate new React components #43556

Merged
merged 10 commits into from
Aug 27, 2019
Merged

Modify I18nProvider so that it does not generate new React components #43556

merged 10 commits into from
Aug 27, 2019

Conversation

chrisdavies
Copy link
Contributor

While developing Lens, we noticed the app went into an infinite loop when we ran Kibana with the pseudo locale: yarn start --i18n.locale=en-xa

The reason seems to be that the i18n provider generates a React component when a pseudo locale is used. This generated component appears to cause the React diffing logic to think that it is looking at a brand new tree, and so useState, useEffect, etc are all reset. This didn't surface elsewhere because the rest of Kibana uses only a single root I18nProvider, whereas Lens uses several nested ones due to the fact that Lens plugins don't require React, so any Lens plugin that actually makes use of React ends up instantiating its own I18nProvider, and may contain other nested plugins which themselves have their own I18nProviders.

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-stack-services

@azasypkin azasypkin requested review from Bamieh and removed request for azasypkin August 20, 2019 06:12
@timroes timroes requested review from a team and removed request for weltenwort August 20, 2019 09:37
@timroes
Copy link
Contributor

timroes commented Aug 20, 2019 •
edited
Loading

Using this PR I can't render the login page anymore (and I assume nothing else either, since I can't get anywhere in Kibana) when using the pseudo locale, because I am getting the following exception:

pseudo_locale_wrapper.js:186 Uncaught TypeError: Cannot read property 'formatMessage' of undefined
    at new PseudoLocaleWrapper (pseudo_locale_wrapper.js:186)
    at constructClassInstance (react-dom.development.js:11312)
    at updateClassComponent (react-dom.development.js:14481)
    at beginWork (react-dom.development.js:15438)
    at performUnitOfWork (react-dom.development.js:19106)
    at workLoop (react-dom.development.js:19146)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:18372)

Since it seems that CI didn't run into that issue, any idea what it could be? I ran yarn kbn bootstrap after checking out the PR?

@Bamieh
Copy link
Member

Bamieh commented Aug 20, 2019

I think the code change makes sense, I will pull this locally later on tonight to play around with it.

@chrisdavies
Copy link
Contributor Author

@Bamieh and @timroes Tim was right. I made a breaking change just prior to pushing last night. Should be working with my latest push.

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

joelgriffith
joelgriffith approved these changes Aug 21, 2019
View reviewed changes
Copy link
Contributor

@joelgriffith joelgriffith left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM

flash1293
flash1293 approved these changes Aug 22, 2019
View reviewed changes
Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and works, LGTM

packages/kbn-i18n/src/react/pseudo_locale_wrapper.tsx
}

/**
* If the locale is our pseudo locale (e.g. en-xa), we override the
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for documenting this 👍

Bamieh
Bamieh approved these changes Aug 26, 2019
View reviewed changes
Copy link
Member

@Bamieh Bamieh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. I like this change :D

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@chrisdavies chrisdavies merged commit f188b29 into elastic:master Aug 27, 2019
@chrisdavies chrisdavies deleted the i18n/stable-provider branch August 27, 2019 14:32
@chrisdavies chrisdavies mentioned this pull request Aug 27, 2019
Merged
chrisdavies added a commit that referenced this pull request Aug 28, 2019
@chrisdavies
Modify I18nProvider so that it does not generate new React components (…
e61d514 
…#43556) (#44100)

This fixes some edge-cases that caused infinite loops: React thinks the tree has changed because of a new root component, effects fire off which change the state and cause a re-render, React thinks the tree has changed because of a new root component...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Bamieh Bamieh Bamieh approved these changes

@flash1293 flash1293 flash1293 approved these changes

@joelgriffith joelgriffith joelgriffith approved these changes

@timroes timroes Awaiting requested review from timroes

Assignees
No one assigned
Labels
Project:i18n release_note:fix v7.4.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@chrisdavies @elasticmachine @timroes @Bamieh @joelgriffith @flash1293 @azasypkin