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

[Bug]: Storybook 7 breaks localization implementation with vue-i18n #22900

Open
MargaritaBusyginaCa opened this issue Jun 2, 2023 · 7 comments

Comments

@MargaritaBusyginaCa
Copy link

MargaritaBusyginaCa commented Jun 2, 2023

Describe the bug

Hello, we are using vue-i18n and @vee-validate/i18n in our project for changing locale from ENG to FR.
It worked perfectly for storybook 6.5, but when we updated to storybook version 7, changing locale no longer works unless the story gets reloaded (on browser window reload, not story within storybook).
There are no warnings or errors in the console, and I believe the issue is coming from storybook 7.

To Reproduce

No response

System

No response

Additional context

No response

@shilman
Copy link
Member

shilman commented Jun 2, 2023

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

@MargaritaBusyginaCa
Copy link
Author

MargaritaBusyginaCa commented Jun 14, 2023

@shilman Yes, I have a repo that you can check to reproduce a bug: https://github.com/MargaritaBusyginaCa/sb7-locale-bug

after you clone the repo and run npm install, please run storybook with npm run storybook and go to Primary Button story. If you click the button, you will see that the language changes only once. But if you refresh the page and start clicking the button again, the localization changes as expected from english to Spanish every time the button is clicked.
That's the bug of storybook7 + vue-i18n. I didn't have this problem with storybook 6

@MargaritaBusyginaCa
Copy link
Author

@shilman I also created a screen recording of the current behaviour of storybook 7 + vue-i18n

Screen.Recording.2023-06-14.at.12.06.09.PM.mov

@shilman
Copy link
Member

shilman commented Jun 14, 2023

cc @kasperpeulen @chakAs3

@chakAs3
Copy link
Contributor

chakAs3 commented Jun 15, 2023

Hi, @MargaritaBusyginaCa I opened a PR on your repo to fix that, that were some issues with dependencies I cleaned. up deprecated ones, but this has nothing to do with the issue

@MargaritaBusyginaCa
Copy link
Author

MargaritaBusyginaCa commented Jun 16, 2023

Hello @chakAs3, thank you for your contribution. I noticed you added app.use(createI18n(i18n));
I haven't seen this syntax in vue-i18n documentation before, so thanks for showing it to me. However, this new syntax changes the i18n object that gets returned. I wonder if there is a way to keep the i18n object as it is?
(I attached screenshots of console.log(i18n) output in console)

Screen Shot 2023-06-16 at 10 35 42 AM
Screen Shot 2023-06-16 at 10 36 54 AM

@chakAs3
Copy link
Contributor

chakAs3 commented Jun 16, 2023

from your screenshot, I think you should set legacy to true.

by the way, I did not change the syntax, I used your exact code, the difference I'm creating an instance for each story. but I upgraded the plugin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

No branches or pull requests

3 participants