histoire-dev / histoire-dev/histoire

Bug with i18n and translation in component

Open
#703 23 comments 14 reactions 0 assignees View on GitHub
to triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.