histoire: Error with Nuxt v3.0.0-rc.9: Package import specifier "#build/app.config.mjs" is not defined in package

Describe the bug

When using Histoire with Nuxt v3.0.0-rc.9 there seems to be an issue with the built-in components like <NuxtLink>. (Nuxt v3.0.0-rc.8 works fine)

Visit reproduction link
run npm run dev - everything should work fine.
Uncomment the <NuxtLink> in the BaseButton.vue component and reload webcontainer.

Error occurs: Error while collecting story /home/projects/nuxt-starter-sf9sq6/stories/BaseButton.story.vue: TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier “#build/app.config.mjs” is not defined in package /home/projects/nuxt-starter-sf9sq6/node_modules/nuxt/package.json imported from /home/projects/nuxt-starter-sf9sq6/node_modules/nuxt/dist/app/config.mjs

There is also an issue in the Nuxt repo regarding this issue: https://github.com/nuxt/nuxt.js/issues/14801

Reproduction

https://stackblitz.com/edit/nuxt-starter-sf9sq6?file=components/BaseButton.vue

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @histoire/plugin-nuxt: ^0.10.7 => 0.10.7 
    @histoire/plugin-vue: ^0.10.7 => 0.10.7 
    histoire: ^0.10.7 => 0.10.7

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
The provided reproduction is a minimal reproducible example of the bug.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 19 (3 by maintainers)

Most upvoted comments

The BaseButton.vue component has a <NuxtLink> inside which is commented out, if I uncomment the <NuxtLink>, I still get the error.

ghost on Sep 20, 2022

As stated in the initial post of this issue, something changed in Nuxt RC.9 because stories with NuxtLink in it were working in Histoire with Nuxt RC.8.

I’ve now again an issue when using the Nuxt Icon Module since it also relies on the nuxt context, it is not working with Histoire and I again get these errors “package import specifier…”. Also I am not able to go back to RC.8 because the module needs atleast RC.9.

We are exploring ideas in Nuxt to make this easier to integrate with tools like Histoire, but until then you’ll need to stub NuxtLink.

It’s not a bug with Histoire; there are quite a lot of Nuxt core composables or components that depend on a broader Nuxt context. But possibly we could provide some built-in stubs in histoire - what do you think @Akryum?

So until this is not resolved, we would need create workarounds for all components which rely directly on the nuxt context or use components which rely on it?

ghost on Oct 12, 2022

@danielroe I will try to isolate the issue. It appears that about 1/5 of our stories are not affected by this, but I can’t see what’s different about the components in the ones that seems to work.

tobiashm on Oct 11, 2022

I’m still getting this error with Nuxt 3.0.0-rc.11 and Histoire 0.11.3 😦

Error while collecting story /…/Something.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/app.config.mjs" is not defined in package /…/node_modules/nuxt/package.json imported from /…/node_modules/nuxt/dist/app/config.mjs
    at new NodeError (node:internal/errors:393:5)
    at throwImportNotDefined (node:internal/modules/esm/resolve:329:9)
    at packageImportsResolve (node:internal/modules/esm/resolve:698:3)
    at moduleResolve (node:internal/modules/esm/resolve:853:16)
    at defaultResolve (node:internal/modules/esm/resolve:1074:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:425:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

Seems like something the Nuxt plug-in ought to take care of?

tobiashm on Jan 19, 2023