@nuxt/icon not working in histoire

awacode21 commented 1 month ago

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:

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

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
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue 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.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 month ago

Start a new pull request in StackBlitz Codeflow.

nuxt-starter-kckxy8 (Open reproduction)

xiaosasori commented 1 month ago

You can install nuxt-icon@0.6.10 instead of @nuxt/icon and update the modules in nuxt.config.ts. It seems like @nuxt/icon doesn't work with Histoire since version 1.0.0.

https://stackblitz.com/edit/nuxt-starter-gp2mej?file=nuxt.config.ts

awacode21 commented 1 month ago

@xiaosasori thanks for the workaround. Do you know if custom collections were already working in 0.6.10 with same syntax? cause i don't get it running with 0.6.10

xiaosasori commented 1 month ago

@awacode21 it's impossible because customCollections is a new feature introduced in version 1.0.0.

histoire-dev / histoire