histoire-dev / histoire-dev/histoire

"Package import specifier "#build/app.config.mjs" is not defined in package" - When using useRuntimeConfig() in nuxt 3

Open
#430 5 comments 0 reactions 0 assignees View on GitHub
nuxt to triage
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.