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

MikeAltinget commented 1 year ago

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

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
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue 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.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 year ago

Start a new pull request in StackBlitz Codeflow.

github-k8sztc (Open reproduction)

Akryum commented 1 year ago

Please give [v0.15.0] a try and report back if your issue is solved or not :pray:

MikeAltinget commented 1 year ago

Please give [v0.15.0] a try and report back if your issue is solved or not 🙏

I'm getting a different error with this version:

Error while collecting story /home/projects/github-brmchy/components/Hello.story.vue:
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
    at formatError (file://file:///home/projects/github-brmchy/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41437:46)
    at TransformContext.error (file://file:///home/projects/github-brmchy/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41433:19)
    at TransformContext.transform (file://file:///home/projects/github-brmchy/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39676:22)
    at async Object.transform (file://file:///home/projects/github-brmchy/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41708:30)
    at async loadAndTransform (file://file:///home/projects/github-brmchy/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39514:29)

Minimal reproduction Stackblitz here: https://stackblitz.com/edit/github-brmchy?file=components/Test.story.vue

I have tried installing @vitejs/plugin-vue as a dependency, dev dependency, with pnpm and with yarn. Nothing seems to work. It's late and I'm probably making a simple mistake, but I can't seem to get it working still.

EDIT: I had forgotten to include the HstNuxt plugin in my histoire config. I have also upgraded to version v0.15.7. Seems to work now! Amazing work, thank you :D Cannot wait to use this at my work

MikeAltinget commented 1 year ago

Hmm when I try it in a bigger project, I get this error:

Error while collecting story /Users/mike/code/AltingetFrontendNuxt3/components/Hello.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#app" is not defined in package /Users/mike/.nvm/versions/node/v18.12.1/lib/node_modules/@nuxt/devtools/package.json imported from /Users/mike/.nvm/versions/node/v18.12.1/lib/node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.client.mjs
    at new NodeError (node:internal/errors:393:5)
    at throwImportNotDefined (node:internal/modules/esm/resolve:347:9)
    at packageImportsResolve (node:internal/modules/esm/resolve:748:3)
    at moduleResolve (node:internal/modules/esm/resolve:903:16)
    at defaultResolve (node:internal/modules/esm/resolve:1124:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

I'm working on a reproduction

BBoehm commented 1 year ago

We also experienced this issue with histoire (v 0.12.4) and useCookie. Upgrading to v 0.15 fixed the issue, but caused some other problems, so we had to find another solution. Switched to an external library for using cookies as a solution.

histoire-dev / histoire