ERR_PACKAGE_IMPORT_NOT_DEFINED Package import specifier "#build/paths.mjs" is not defined
lud-hu opened this issue · comments
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
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- The provided reproduction is a minimal reproducible example of the bug.
I'm having the same issue, did you find a fix?
Nope, unfortunately not, @SeppeP.
Seems like histoire is not under development very actively...
Anyone resolved this issue? I've the same with CkEditor5, it works well with Nuxt, but library breaks all my stories for a css could not be loaded. So i add the line viteNodeInlineDeps but after the error message is the same:
"#build/paths.mjs" is not defined