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):
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)
Describe the bug
After installing the latest versions of histoire in my nuxt project, I got an error complaining about importing lottie:
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):But after that, I get a weird error about an import coming from nuxt:
Any idea on how to debug or fix this?
Reproduction
https://github.com/lud-hu/nuxt-histoire-reproduction/tree/nuxt-error
System Info
Used Package Manager
yarn
Validations