histoire-dev / histoire-dev/histoire
Issue with useViewport() and Nuxt Plugin in Histoire
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### 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
```shell
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
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) 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](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Assessment
This issue has not been assessed yet.