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

react-hooks example is broken #642

Closed
unindented opened this issue Dec 13, 2018 · 12 comments
Closed

react-hooks example is broken #642

unindented opened this issue Dec 13, 2018 · 12 comments

Comments

@unindented
Copy link

@unindented unindented commented Dec 13, 2018

Describe the bug
The react-hooks example in the repo seems to enter an infinite loop. My app experiences the same issue when using useTranslation.

Occurs in react-i18next version
Checked out commit 458d242.

node --version
v10.12.0
npm --version
6.4.1

To Reproduce
Steps to reproduce the behavior:

git clone https://github.com/i18next/react-i18next.git
cd react-i18next/example/react-hooks
npm install
npm start
<open in browser and see browser tab lock up>

Expected behaviour
Page should load normally.

Screenshots
N/A

OS (please complete the following information):

  • Device: MBP 2015 15"
  • Browser: Chrome 70.0.3538.110

Additional context
I think throwing the promise in useTranslation is what starts the infinite loop.

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Dec 13, 2018

Can't reproduce...thowing promise triggers the suspense

@unindented

This comment has been minimized.

Copy link
Author

@unindented unindented commented Dec 13, 2018

@jamuhl did you clone a fresh repo, or reuse an existing one? If you clone fresh and npm i, you'll end up with react@16.7.0-alpha.2. Maybe you're still on alpha.0 which didn't exhibit this problem?

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Dec 13, 2018

just tried removed node_modules, lockfiles -> updated dep. to alpha.2 -> npm i -> npm start -> all runs

node 9.3 here...but that should be irrelevant.

@unindented

This comment has been minimized.

Copy link
Author

@unindented unindented commented Dec 13, 2018

Dang, what could be the difference between your environment and mine then? I'm able to repro in every browser installed on my computer (Chrome, Safari, Firefox, Opera), and I just ran the steps above:

git clone https://github.com/i18next/react-i18next.git
cd react-i18next/example/react-hooks
npm install
npm start
@unindented

This comment has been minimized.

Copy link
Author

@unindented unindented commented Dec 13, 2018

Ok, the problem seems to be that ready in useT.js is always false for me, because my navigator.languages returns ['en-US', 'en'], but the translations file lives under en/translation.json.

If I open http://localhost:3000/?lng=en in my browser, things work fine.

Do you happen to have a cookie, or something else, that's telling i8next to load en instead of en-US?

@unindented

This comment has been minimized.

Copy link
Author

@unindented unindented commented Dec 13, 2018

I can repro when I try to load any locale that's not exactly en or de. So something like http://localhost:3000/?lng=es should trigger the issue for you too.

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Dec 13, 2018

ah...now I see...yes...will need to think how to solve this: https://github.com/i18next/react-i18next/blob/master/src/hooks/useTranslation.js#L42

check for i18n.languages[0] seems to fail in this cases not yet 100% sure why...might be we not set those namespaces to empty on error - will check this tomorrow.

@unindented

This comment has been minimized.

Copy link
Author

@unindented unindented commented Dec 13, 2018

@jamuhl awesome, thanks for looking into this! I'm really excited about this i18next hooks API!

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Dec 13, 2018

@unindented

This comment has been minimized.

Copy link
Author

@unindented unindented commented Dec 13, 2018

@jamuhl it's working!

@unindented

This comment has been minimized.

Copy link
Author

@unindented unindented commented Dec 13, 2018

Thank you very much for fixing it in such short notice!

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Dec 14, 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 closed this Dec 14, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.