histoire
histoire copied to clipboard
histoire-dev
[ERR_UNSUPPORTED_DIR_IMPORT] causes story not to be collected
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/@[email protected][email protected][email protected]_/node_modules/@tanstack/vue-virtual/dist/esm' is not supported resolving ES modules imported from /Users/nook/work/repro-histoire-reka/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite-node/dist/client.mjs
Did you mean to import "/Users/nook/work/repro-histoire-reka/node_modules/.pnpm/@[email protected][email protected][email protected]_/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. I tried playing with the configuration and viteNodeInlineDeps but it just triggers another error:
// 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/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]__2stchi5ktnsrj3k25wrdrj6svq/node_modules/nuxt/package.json imported from /Users/nook/work/repro-histoire-reka/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]__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/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]__2stchi5ktnsrj3k25wrdrj6svq/node_modules/nuxt/package.json imported from /Users/nook/work/repro-histoire-reka/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]__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
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
- [x] Read the Contributing Guidelines.
- [x] Read the docs.
- [x] Check that there isn't already an issue 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.
- [x] The provided reproduction is a minimal reproducible example of the bug.
Transitioned from storybook....or at least wanted to. having same issue
Error while collecting story /home/workspace/flikluck/flik_luck_website/components/Navbar/index.story.vue:
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/workspace/flikluck/flik_luck_website/node_modules/minimatch/dist/esm' is not supported resolving ES modules imported from /home/workspace/flikluck/flik_luck_website/node_modules/histoire/node_modules/vite-node/dist/client.mjs
Did you mean to import "/home/workspace/flikluck/flik_luck_website/node_modules/minimatch/dist/esm/index.js"?
at finalizeResolution (node:internal/modules/esm/resolve:258:11)
at moduleResolve (node:internal/modules/esm/resolve:924:10)
at defaultResolve (node:internal/modules/esm/resolve:1148:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:541:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:510:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleLoader.import (node:internal/modules/esm/loader:473:34)
at defaultImportModuleDynamicallyForModule (node:internal/modules/esm/utils:214:31)
at importModuleDynamicallyCallback (node:internal/modules/esm/utils:253:12)
at ViteNodeRunner.importExternalModule (file:///home/workspace/flikluck/flik_luck_website/node_modules/histoire/node_modules/vite-node/dist/client.mjs:357:5)
