histoire-dev / histoire-dev/histoire

@nuxt/icon not working in histoire

Open
#746 4 comments 0 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

I added @nuxt/icon to my project. In the project it is working fine but in histoire it is not working.
In histoire it is not able to render the stories that contain components that use @nuxt/icon.

On devtools console you always see the error:
Bildschirmfoto 2024-07-22 um 21 10 24

it doesn't matter if mode is css or svg, it doesn't matter if from iconify icon libs, global components or custom collections, it is simple not able to work with it. The error is always the same.

### Reproduction

https://stackblitz.com/edit/nuxt-starter-kckxy8

run the histoire to see the story not getting rendered and the console error in devtools.

### System Info

```shell
MacBook Pro Apple M2 Max 14.2.1 (23C71), Google Chrome Browser Version 126.0.6478.127 (Offizieller Build) (arm64)
```

### 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

Run the linked StackBlitz reproduction and inspect the browser console while rendering the affected Histoire stories. Trace the @nuxt/icon integration from the reported error; done means stories containing icon components render in Histoire in both CSS and SVG modes, including the listed icon sources.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.