histoire-dev / histoire-dev/histoire
Bug with i18n and translation in component
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
Hello,
First of all, thank you for building this project.
I'm working on a Nuxt project with i18n but I can't make `histoire` work correctly. I've been looking for the source of the problem and here's what I've discovered so far:
- when the module `@nuxtjs/i18n` is active, there an `error 500` displayed in the story iframe that says `Cannot read properties of undefined (reading 'public')`. I think it happens on module i18n initialization because it doesn't know the Nuxt App context or something (I'm not sure).
- if I disabled the module `@nuxtjs/i18n`, there's an error when histoire is building that says `RollupError: Expected ';', '}' or `. I think this is due to translations 'in-component' using the `` tag.
### Reproduction
I have made a small project that reproduce the problem : https://stackblitz.com/edit/nuxt-starter-xfql3e?file=nuxt.config.ts
### System Info
```shell
packages versions :
- nuxt: 3.10.3
- @nuxtjs/i18n: 8.2.0
- histoire: 0.17.14
- @histoire/plugin-vue: 0.17.14
- @histoire/plugin-nuxt: 0.17.14
```
### Used Package Manager
npm
### Validations
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and nuxt.config.ts, using the listed Nuxt, @nuxtjs/i18n, and Histoire versions. Reproduce the iframe error with i18n enabled and the build error with it disabled, then trace those two paths. Done means in-component translations work and the story iframe builds without either error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- frontend, internationalization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100