histoire-dev / histoire-dev/histoire

[ERR_UNSUPPORTED_DIR_IMPORT] causes story not to be collected

Open
#780 2 comments 8 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

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.