Histoire cannot display story for a component that uses useViewport

[kilab]

Description

When I try to create a story in Histoire for a component that uses useViewport().isGreaterOrEquals('m'), I get 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)

Steps to reproduce

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

Expected Behavior

The component is displayed in the story and its content changes depending on the viewport.

[mvrlin]

@kilab Hi! The problem is with the Nuxt plugin for Histoire. It's mocking the useNuxtApp wrong and probably not initializing viewport module correctly.

Here we initialize the manager getting the initial value and provide it to the nuxtApp. https://github.com/mvrlin/nuxt-viewport/blob/main/src/runtime/plugin.ts#L58

Here is the useViewport composable. It's only returning the manager injected in the nuxt context. https://github.com/mvrlin/nuxt-viewport/blob/main/src/runtime/composables.ts#L5

Here you can see how Histoire is mocking useNuxtApp. Just a simple object. https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-nuxt/runtime/composables.mjs#L1

Try to open an issue there. I can contribute if needed.

[kilab]

@mvrlin Thank you for your quick response and for pointing me in the right direction.

I'll proceed with opening an issue on the respective repositories to address this problem. I'll include the information you provided about the specific files involved, which will be helpful for the developers to understand the root cause.

[mvrlin]

@kilab If it's not an obligation to stick with Histoire, consider trying https://github.com/nuxt-community/storybook

[benavern]

Hello!

I am facing the same issue and have already written a few stories for histoire. I don't want to switch to storybook again with all its dependencies, etc ...

By the way the error I'm facing is not exactly the same:

I think there is a window object but no matchMedia method on it. would it be possible to fix it with some polyfill or something ?

Thank you in advance for your answers.

[mvrlin]

@benavern Hi! Can you make an example in Stackblitz or Codesandbox?

[benavern]

For some reason, I can't reproduce the exact error on stackblitz. https://stackblitz.com/edit/histoire-nuxt3-starter-gtvbpp?file=components%2FMeow.story.vue

Here I have the classic "window is not defined" error

[mvrlin]

For some reason, I can't reproduce the exact error on stackblitz. https://stackblitz.com/edit/histoire-nuxt3-starter-gtvbpp?file=components%2FMeow.story.vue

Here I have the classic "window is not defined" error

Hmm, okay. Can you show me the test itself?

[benavern]

I don't know what do you mean by "the test" ?

[mvrlin]

I don't know what do you mean by "the test" ?

How are you testing components? Maybe an example file.