histoire-dev / histoire-dev/histoire
[ERR_UNSUPPORTED_DIR_IMPORT] causes story not to be collected
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When running the histoire server, a log indicates that a story couldn't be collected:
```
Error while collecting story /Users/nook/work/repro-histoire-reka/app/components/Badge.story.vue:
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/nook/work/repro-histoire-reka/node_modules/.pnpm/@tanstack+vue-virtual@3.11.3_vue@3.5.13_typescript@5.7.3_/node_modules/@tanstack/vue-virtual/dist/esm' is not supported resolving ES modules imported from /Users/nook/work/repro-histoire-reka/node_modules/.pnpm/vite-node@0.34.7_@types+node@22.12.0_terser@5.37.0/node_modules/vite-node/dist/client.mjs
Did you mean to import "/Users/nook/work/repro-histoire-reka/node_modules/.pnpm/@tanstack+vue-virtual@3.11.3_vue@3.5.13_typescript@5.7.3_/node_modules/@tanstack/vue-virtual/dist/esm/index.js"?
at finalizeResolution (node:internal/modules/esm/resolve:251:11)
at moduleResolve (node:internal/modules/esm/resolve:913:10)
at defaultResolve (node:internal/modules/esm/resolve:1037:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38)
at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:542:36)
at TracingChannel.tracePromise (node:diagnostics_channel:337:14)
at ModuleLoader.import (node:internal/modules/esm/loader:541:21)
Collect stories end 1598ms
```
I made the smallest reproducible project, and this issue occurs whenever I use a component from [reka-ui](https://github.com/unovue/radix-vue/tree/v2). I tried playing with the configuration and `viteNodeInlineDeps` but it just triggers another error:
```ts
// histoire.config.ts
export default defineConfig({
viteNodeInlineDeps: [
/@tanstack\/vue-virtual/,
// /vue-virtual/,
],
})
```
```
Error while collecting story /Users/nook/work/repro-histoire-reka/app/components/PrimaryButton.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/fetch.mjs" is not defined in package /Users/nook/work/repro-histoire-reka/node_modules/.pnpm/nuxt@3.15.4_@parcel+watcher@2.5.1_@types+node@22.12.0_db0@0.2.3_ioredis@5.4.2_magicast@0.3.5__2stchi5ktnsrj3k25wrdrj6svq/node_modules/nuxt/package.json imported from /Users/nook/work/repro-histoire-reka/node_modules/.pnpm/nuxt@3.15.4_@parcel+watcher@2.5.1_@types+node@22.12.0_db0@0.2.3_ioredis@5.4.2_magicast@0.3.5__2stchi5ktnsrj3k25wrdrj6svq/node_modules/nuxt/dist/app/entry.js
at importNotDefined (node:internal/modules/esm/resolve:283:10)
at packageImportsResolve (node:internal/modules/esm/resolve:733:9)
at moduleResolve (node:internal/modules/esm/resolve:897:16)
at defaultResolve (node:internal/modules/esm/resolve:1037:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38)
at ModuleJob._link (node:internal/modules/esm/module_job:132:49)
Error while collecting story /Users/nook/work/repro-histoire-reka/app/components/Badge.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/fetch.mjs" is not defined in package /Users/nook/work/repro-histoire-reka/node_modules/.pnpm/nuxt@3.15.4_@parcel+watcher@2.5.1_@types+node@22.12.0_db0@0.2.3_ioredis@5.4.2_magicast@0.3.5__2stchi5ktnsrj3k25wrdrj6svq/node_modules/nuxt/package.json imported from /Users/nook/work/repro-histoire-reka/node_modules/.pnpm/nuxt@3.15.4_@parcel+watcher@2.5.1_@types+node@22.12.0_db0@0.2.3_ioredis@5.4.2_magicast@0.3.5__2stchi5ktnsrj3k25wrdrj6svq/node_modules/nuxt/dist/app/entry.js
at importNotDefined (node:internal/modules/esm/resolve:283:10)
at packageImportsResolve (node:internal/modules/esm/resolve:733:9)
at moduleResolve (node:internal/modules/esm/resolve:897:16)
at defaultResolve (node:internal/modules/esm/resolve:1037:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38)
at ModuleJob._link (node:internal/modules/esm/module_job:132:49)
```
### Reproduction
https://github.com/noook/repro-histoire-reka
### System Info
```shell
System:
OS: macOS 15.2
CPU: (10) arm64 Apple M1 Pro
Memory: 105.30 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
pnpm: 9.6.0 - ~/Library/pnpm/pnpm
bun: 1.0.6 - ~/.bun/bin/bun
Browsers:
Chrome: 132.0.6834.111
Safari: 18.2
npmPackages:
@histoire/plugin-nuxt: 1.0.0-alpha.1 => 1.0.0-alpha.1
@histoire/plugin-vue: 1.0.0-alpha.1 => 1.0.0-alpha.1
histoire: 1.0.0-alpha.1 => 1.0.0-alpha.1
nuxt: 3.15.4 (v4 mode)
```
### 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
Start by running the linked minimal reproduction and reading histoire.config.ts, especially the viteNodeInlineDeps setting, along with the story collection entry points. Reproduce the ERR_UNSUPPORTED_DIR_IMPORT and ERR_PACKAGE_IMPORT_NOT_DEFINED errors with the listed Nuxt and reka-ui setup. Done means stories using reka-ui are collected without either module-resolution error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nodejs, nuxt, typescript, vite
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100