histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.2k stars 191 forks source link

Issue with useViewport() and Nuxt Plugin in Histoire #565

Open kilab opened 1 year ago

kilab commented 1 year ago

Describe the bug

When attempting to create a story in Histoire for a component that uses useViewport().isGreaterOrEquals('m'), I encounter an error in the browser:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isGreaterOrEquals')
    at Proxy._sfc_render (TestComponent.vue:6:23)
    at renderComponentRoot (vue.js:2226:17)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.js:7101:46)
    at ReactiveEffect.run (vue.js:425:19)
    at instance.update (vue.js:7214:52)
    at setupRenderEffect (vue.js:7222:5)
    at mountComponent (vue.js:7012:5)
    at processComponent (vue.js:6965:9)
    at patch (vue.js:6438:11)
    at mountChildren (vue.js:6682:7)

Original issue: https://github.com/mvrlin/nuxt-viewport/issues/44.

@mvrlin pointed that the problem is possible in mocking useNuxtApp as a simple object: https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-nuxt/runtime/composables.mjs#L1

Reproduction

Run Histoire and try to preview TestComponent story: https://stackblitz.com/edit/nuxt-starter-uoumbe?file=components%2FTestComponent.vue,stories%2FTestComponent.story.vue

System Info

System:
    OS: Linux 6.4 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 13.60 GB / 30.72 GB
    Container: Yes
    Shell: 3.6.1 - /bin/fish
  Binaries:
    Node: 16.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
    pnpm: 8.6.1 - ~/.local/share/pnpm/pnpm

Used Package Manager

pnpm

Validations

stackblitz[bot] commented 1 year ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

zarskilukasz commented 10 months ago

I am receiving an error https://github.com/histoire-dev/histoire/issues/487 associated with the same plugin