histoire-dev / histoire-dev/histoire
Vuetify button cannot be mounted on story with grid layout
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
Unable to use vuetify button on story
```vue
Hello world
import { VBtn } from "vuetify/components/VBtn"
```
The above story throws expection when you try to select the component.
### Reproduction
https://stackblitz.com/edit/vitejs-vite-ixfceb
```npm run story:dev```
### System Info
```shell
System:
OS: macOS 14.4.1
CPU: (10) arm64 Apple M1 Pro
Memory: 771.09 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
pnpm: 8.10.3 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 121.0.6167.184
Edge: 123.0.2420.81
Safari: 17.4.1
npmPackages:
@histoire/plugin-vue: ^0.17.16 => 0.17.16
@vitejs/plugin-vue: ^4.2.3 => 4.6.2
histoire: ^0.17.16 => 0.17.16
vite: ^4.4.5 => 4.5.3
```
```
### Used Package Manager
npm
### 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
Research direction
Start with the linked StackBlitz reproduction and run `npm run story:dev` to observe the failure when selecting the Vuetify button in the grid-layout story. Trace the grid-layout story mounting and selection path; done means the provided VBtn story mounts and can be selected without throwing an exception.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100