histoire-dev / histoire-dev/histoire

Issue with useViewport() and Nuxt Plugin in Histoire

Open
#565 2 comments 1 reaction 0 assignees View on GitHub
to triage
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.