histoire-dev / histoire-dev/histoire
ERR_PACKAGE_IMPORT_NOT_DEFINED Package import specifier "#build/paths.mjs" is not defined
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### 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):
```ts
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. (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
```shell
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
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) 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](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Research direction
Start by running the nuxt-histoire-reproduction example on the nuxt-error branch with the listed Nuxt, Histoire, Vite, and Node versions. Inspect histoire.config.ts and the failing imports from nuxt/dist/app/entry.js, using the lottie-web inline-dependency workaround as a comparison. Done means story collection works without either reported error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- node.js, nuxt, typescript, vite
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100