histoire-dev / histoire-dev/histoire
"Package import specifier "#build/app.config.mjs" is not defined in package" - When using useRuntimeConfig() in nuxt 3
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When using `useRuntimeConfig()` in a component the following error occurs:
```
Error while collecting story /home/projects/github-k8sztc/components/HelloRuntimeConfig.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/app.config.mjs" is not defined in package /home/projects/github-k8sztc/node_modules/nuxt/package.json imported from /home/projects/github-k8sztc/node_modules/nuxt/dist/app/config.mjs
at TypeError.get (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:6:292489)
at _0x5b523e.writeJSError (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:173392)
at _0x5b523e.writeJSReceiver (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:169524)
at _0x5b523e.writeObject (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:167178)
at _0x5b523e.writeJSObjectPropertiesSlow (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:176204)
at _0x5b523e.writeJSObject (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:170059)
at _0x5b523e.writeJSReceiver (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:168957)
at _0x5b523e.writeObject (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:167178)
at _0x5b523e.writeJSObjectPropertiesSlow (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:176204)
at _0x5b523e.writeJSObject (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:170059)
at _0x5b523e.writeJSReceiver (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:168957)
at _0x5b523e.writeObject (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:167178)
at _0x2ee3fc.writeValue (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:196995)
at https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:82311
at _0x3b6a3c.postMessage (https://githubk8sztc-4fug.w-credentialless.staticblitz.com/blitz.f46762818326be16a78de429bec3a3775ca1af32.js:15:82355)
at eval (file://file:///home/projects/github-k8sztc/node_modules/tinypool/dist/esm/worker.js:131:10)
```
Seems related to https://github.com/nuxt/nuxt/issues/14801, but I use auto imports and the newest version of nuxt and histoire
### Reproduction
I have made a reproduction here: https://stackblitz.com/edit/github-k8sztc?file=components/HelloRuntimeConfig.vue
It consists of a `Hello.story.vue` and a `HelloRuntimeConfig.story.vue` story. The only difference is that `HelloRuntimeConfig.story.vue` refers to a component with `const config = useRuntimeConfig()`. If this line is removed, the error disappears.
### System Info
```shell
System:
OS: macOS 13.0.1
CPU: (8) arm64 Apple M1 Pro
Memory: 145.06 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.15 - ~/.nvm/versions/node/v14.19.3/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
Browsers:
Brave Browser: 109.1.47.171
Chrome: 109.0.5414.87
Edge: 109.0.1518.52
Firefox: 106.0.1
Safari: 16.1
npmPackages:
@histoire/plugin-nuxt: ^0.12.4 => 0.12.4
@histoire/plugin-vue: ^0.12.4 => 0.12.4
histoire: ^0.12.4 => 0.12.4
(But same error occurs in stackblitz). On my machine I use yarn, and I used npm for stackblitz
```
### Used Package Manager
npm
### 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 with the StackBlitz reproduction and compare Hello.story.vue with HelloRuntimeConfig.story.vue, focusing on the useRuntimeConfig() call. Trace the failure from the reported nuxt/dist/app/config.mjs entry and the #build/app.config.mjs import. Done means collecting the runtime-config story without ERR_PACKAGE_IMPORT_NOT_DEFINED.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100