Can't resolve dependencies correctly

kainstar commented 3 months ago

Describe the bug

When i import lucide-vue-next, histoire report it cannot find module:

Error while collecting story /Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/demo.story.vue:
Error: Cannot find module /Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/lucide-vue-next@0.397.0_vue@3.4.30/node_modules/lucide-vue-next/dist/esm imported from file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old, file:///Users/zsk/code/github.com/kainstar/reproduce/, file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/_index.js, file:///Users/zsk/code/github.com/kainstar/reproduce/node_modules
    at _resolve (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2102:19)
    at resolveSync (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2111:10)
    at resolvePathSync (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2121:24)
    at resolvePath (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2125:28)
    at isValidNodeImport (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2585:30)
    at _shouldExternalize (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:78:32)
    at shouldExternalize (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:55:19)
    at ViteNodeServer.shouldExternalize (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:225:12)
    at ViteNodeServer._fetchModule (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:322:36)
    at ViteNodeServer.fetchModule (file:///Users/zsk/code/github.com/kainstar/reproduce/histoire-vite-node-too-old/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:261:14)

Reason and solution

After debug, i found it's because histoire using vite-node with a old version 0.34.7 whose latest version is 1.6.0, when i force using vite-node@1.6.0 with pnpm's overrides config, it works.

So is histoire has any play to upgrade vite-node to latest version?

Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-hzthpp?file=src%2Fdemo.story.vue

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Memory: 772.61 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/Library/Caches/fnm_multishells/18515_1719402069456/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/18515_1719402069456/bin/yarn
    npm: 10.2.3 - ~/Library/Caches/fnm_multishells/18515_1719402069456/bin/npm
    pnpm: 8.15.1 - ~/Library/Caches/fnm_multishells/18515_1719402069456/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.126
    Safari: 17.4.1
  npmPackages:
    @histoire/plugin-vue: ^0.17.17 => 0.17.17 
    @vitejs/plugin-vue: ^5.0.5 => 5.0.5 
    histoire: ^0.17.17 => 0.17.17 
    vite: ^5.3.1 => 5.3.1

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.

stackblitz[bot] commented 3 months ago

Start a new pull request in StackBlitz Codeflow.

histoire-vue3-starter-hzthpp (Open reproduction)

renatomoor commented 2 months ago

I'm having the same issue when using the carousel component from shadcn-vue.

Error: Cannot find module /Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/embla-carousel-vue@8.1.7_vue@3.4.33/node_modules/embla-carousel-vue/esm imported from file:///Users/renatomoor/seelo/co-living-davos, file:///Users/renatomoor/seelo/, file:///Users/renatomoor/seelo/co-living-davos/_index.js, file:///Users/renatomoor/seelo/node_modules
    at _resolve (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2102:19)
    at resolveSync (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2111:10)
    at resolvePathSync (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2121:24)
    at resolvePath (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2125:28)
    at isValidNodeImport (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2585:30)
    at _shouldExternalize (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:78:32)
    at shouldExternalize (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:55:19)
    at ViteNodeServer.shouldExternalize (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:225:12)
    at ViteNodeServer._fetchModule (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:322:36)
    at ViteNodeServer.fetchModule (file:///Users/renatomoor/seelo/co-living-davos/node_modules/.pnpm/vite-node@0.34.7/node_modules/vite-node/dist/server.mjs:261:14)

renatomoor commented 2 months ago

I've overrided to vite-node@2.0.3 but now I have this error in the console:

/Users/renatomoor/seelo/co-living-davos/node_modules/.histoire/plugins/builtin_tailwind-tokens/Tailwind.story.js:1
import 'histoire-style'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

renatomoor commented 2 months ago

I remove the tailwind tokens default plugin for histoire like this for now:


import { tailwindTokens } from 'histoire/src/node/builtin-plugins/tailwind-tokens'

export default defineConfig({
  plugins: [
    tailwindTokens({
      configFile: null,
    }),
  ],
})

histoire-dev / histoire