histoire-dev / histoire-dev/histoire
Can't collect stories with konvajs in Nuxt project
- 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
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