Nuxt3 nuxt-modules/icon custom icons not showing

letoast commented 6 months ago

Describe the bug

Similar to #590, the custom icon that is a .vue template inside /components/global isn't loaded.

Reproduction

Add nuxt-modules/icon and Histoire, add a custom .vue component in /components/global and try to use it

https://stackblitz.com/edit/histoire-nuxt3-starter-j5v2es?file=components%2FTestIcon.story.vue

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Xeon(R) CPU E5-2667 v3 @ 3.20GHz
    Memory: 83.14 GB / 127.92 GB
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.11 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: 124.0.6367.119
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.3636

Used Package Manager

yarn

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 6 months ago

Start a new pull request in StackBlitz Codeflow.

histoire-nuxt3-starter-j5v2es (Open reproduction)

letoast commented 6 months ago

Using @juleshry 's PR seems to fix this issue. It looks like the problem is the mocking of useNuxtApp which nuxt-icon uses as a plugin https://github.com/histoire-dev/histoire/pull/710

rubenhazelaar commented 2 months ago

I am encountering the same issue (although with another dependency leaning on useNuxtApp), unfortunately the changes from the PR (#710) only work in my project if I ONLY comment out the following code: nuxt.hook('imports:sources' // etc.., NOT if I remove the following line { src: join(runtimeDir, 'composables.mjs'), filename: 'histoire/composables.mjs' },.

Perhaps #750 could be a more agreeable option? Regardless of the chosen solution, I assume many people will encounter this problem at some point. This potentially also plays a role in issues https://github.com/histoire-dev/histoire/issues/668, https://github.com/histoire-dev/histoire/issues/701 and #746

Is there someone - preferably a maintainer - who could shed some light on this? That would be great.

histoire-dev / histoire