histoire-dev / histoire-dev/histoire

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

Open
#684 4 comments 0 reactions 0 assignees View on GitHub
to triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.