histoire-dev / histoire-dev/histoire

Can't collect stories with konvajs in Nuxt project

Open
#786 0 comments 0 reactions 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

I want to use the Histoire in a project with Nuxt and konvajs. But after setup configuration, I got this error:
```
ℹ Vite client warmed up in 1ms 10:19:29 AM
Error while collecting story /home/ds/histoire-example/stories/Button.story.vue:
Error: Cannot find module 'canvas'
Require stack:
- /home/ds/histoire-example/node_modules/.pnpm/konva@9.3.18/node_modules/konva/lib/index-node.js
at Function._resolveFilename (node:internal/modules/cjs/loader:1405:15)
at defaultResolveImpl (node:internal/modules/cjs/loader:1061:19)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1066:22)
at Function._load (node:internal/modules/cjs/loader:1215:37)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
at Module.require (node:internal/modules/cjs/loader:1491:12)
at require (node:internal/modules/helpers:135:16)
at /home/ds/histoire-example/node_modules/.pnpm/konva@9.3.18/node_modules/konva/lib/index-node.js:4:16
at ViteNodeRunner.runModule (file:///home/ds/histoire-example/node_modules/.pnpm/vite-node@0.34.7_@types+node@22.13.10_sass@1.85.1_terser@5.39.0/node_modules/vite-node/dist/client.mjs:342:11)
Collect stories end 4356ms

```
The project works well, but Histoire doesn't want to work correctly. Also, I don't use konvajs in stories, it's existed in project only, for now.
The 'canvas' module is not installed directly in the project. But if I tried to add it, then I got this:

```
Error while collecting story /home/denys/Projects/ronaldo-web/stories/Button.story.vue:
Error: Cannot find module '../build/Release/canvas.node'
Require stack:
- /home/ds/histoire-example/node_modules/.pnpm/canvas@3.1.0/node_modules/canvas/lib/bindings.js
- /home/ds/histoire-example/node_modules/.pnpm/canvas@3.1.0/node_modules/canvas/lib/canvas.js
- /home/ds/histoire-example/node_modules/.pnpm/canvas@3.1.0/node_modules/canvas/index.js
- /home/ds/histoire-example/node_modules/.pnpm/konva@9.3.18/node_modules/konva/lib/index-node.js
at Function._resolveFilename (node:internal/modules/cjs/loader:1405:15)
at defaultResolveImpl (node:internal/modules/cjs/loader:1061:19)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1066:22)
at Function._load (node:internal/modules/cjs/loader:1215:37)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
at Module.require (node:internal/modules/cjs/loader:1491:12)
at require (node:internal/modules/helpers:135:16)
at Object. (/home/ds/histoire-example/node_modules/.pnpm/canvas@3.1.0/node_modules/canvas/lib/bindings.js:3:18)
at Module._compile (node:internal/modules/cjs/loader:1734:14)

```

### Reproduction

- Create Nuxt project
- Install konvajs
- Add the default configuration from Histoire docs and the default story

### System Info

```shell
Linux Ubuntu
```

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

Research direction

Reproduce the issue with a Nuxt project, Histoire's default configuration, the default story, and konvajs installed through pnpm. Start by tracing story collection through the reported konva/lib/index-node.js and canvas loading errors. Done means the default story collects successfully when konvajs exists in the project but is not used by the story.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript, vite
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.