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)
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:
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
Used Package Manager
pnpm
Validations