histoire-dev / histoire-dev/histoire

Nuxt/image-edge + Histoire doesnt't work

Open
#385 4 comments 6 reactions 0 assignees View on GitHub
nuxt to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

- I have made a fresh nuxt project on stackblitz (and locally via Nuxt's "getting started" instructions)
- then installed histoire while following the getting started for nuxt 3
- then installed Nuxt/image-edge follwing the getting started for nuxt 3
- then created a basic Image.vue and Image.story.vue, and got the following errors in console when trying to run Histoire:
![Screenshot 2022-12-02 at 08 05 24](https://user-images.githubusercontent.com/59842057/205235241-b7149ffd-e9f5-41de-aa7b-aa26e60d5a5f.png)

For used package manager - I use yarn locally but the reproduction stackblitz uses npm

### Reproduction

[StackBlitz](https://stackblitz.com/edit/nuxt-starter-fbr3jz?file=components%2FImage.vue,nuxt.config.ts)

### System Info

```shell
System:
OS: macOS 13.0.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 7.64 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.17.1 - ~/Library/Caches/fnm_multishells/43544_1669964830256/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.15.0 - ~/Library/Caches/fnm_multishells/43544_1669964830256/bin/npm
Browsers:
Chrome: 107.0.5304.121
Firefox: 106.0.1
Firefox Developer Edition: 108.0
Safari: 16.1
```

### 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

Open the contributing guide

Research direction

Start by opening the StackBlitz reproduction and reviewing components/Image.vue, Image.story.vue, and nuxt.config.ts. Run Histoire with the Nuxt/image-edge setup, trace the console errors, and verify that the Image story loads without those errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.