histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.03k stars 174 forks source link

ERR_PACKAGE_IMPORT_NOT_DEFINED Package import specifier "#build/paths.mjs" is not defined #684

Open lud-hu opened 3 months ago

lud-hu commented 3 months ago

Describe the bug

After installing the latest versions of histoire in my nuxt project, I got an error complaining about importing lottie:

Error while collecting story /repo/components/01_atoms/TheButton.story.vue:
TypeError: Cannot set properties of null (setting 'fillStyle')
    at /repo/node_modules/lottie-web/build/player/lottie.js:1320:21
    at /repo/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /repo/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /repo/node_modules/lottie-web/build/player/lottie.js:2:83
    at /repo/node_modules/lottie-web/build/player/lottie.js:5:3
    at ViteNodeRunner.runModule (file:///repo/node_modules/histoire/node_modules/vite-node/dist/client.mjs:342:11)
    at ViteNodeRunner.directRequest (file:///repo/node_modules/histoire/node_modules/vite-node/dist/client.mjs:326:16)
    at async ViteNodeRunner.cachedRequest (file:///repo/node_modules/histoire/node_modules/vite-node/dist/client.mjs:189:14)
    at async ViteNodeRunner.dependencyRequest (file:///repo/node_modules/histoire/node_modules/vite-node/dist/client.mjs:223:12)
    at async /repo/components/01_atoms/TheAnimation.vue:4:31

I could fix this with updating the histoire.config.ts (funny thing: this only works if the tested story is not using lottie, but another, untested one is using it):

export default defineConfig({
  plugins: [HstVue(), HstNuxt()],
  viteNodeInlineDeps: [/lottie-web/],
});

But after that, I get a weird error about an import coming from nuxt:

Error while collecting story /repo/components/01_atoms/TheButton.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/paths.mjs" is not defined in package /repo/node_modules/nuxt/package.json imported from /repo/node_modules/nuxt/dist/app/entry.js
    at new NodeError (node:internal/errors:405:5)
    at importNotDefined (node:internal/modules/esm/resolve:353:10)
    at packageImportsResolve (node:internal/modules/esm/resolve:803:9)
    at moduleResolve (node:internal/modules/esm/resolve:967:16)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36)

Any idea on how to debug or fix this?

Reproduction

https://github.com/lud-hu/nuxt-histoire-reproduction/tree/nuxt-error

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 166.75 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 4.0.2 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - /opt/homebrew/opt/node@18/bin/npm
    pnpm: 8.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.184
    Edge: 121.0.2277.128
    Safari: 17.0
  npmPackages:
    @histoire/plugin-nuxt: ^0.17.10 => 0.17.10 
    @histoire/plugin-vue: ^0.17.11 => 0.17.11 
    @vitejs/plugin-vue: ^5.0.2 => 5.0.2 
    histoire: ^0.17.9 => 0.17.9 
    vite: ^5.0.12 => 5.0.12
    nuxt: 3.9.1

Used Package Manager

yarn

Validations

SeppeP commented 1 month ago

I'm having the same issue, did you find a fix?

lud-hu commented 1 month ago

Nope, unfortunately not, @SeppeP. Seems like histoire is not under development very actively...