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

ghost · 2022-09-11T16:16:00Z

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: nuxt/nuxt#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.

The text was updated successfully, but these errors were encountered:

Lyokolux · 2022-09-15T14:55:42Z

I have the issue with a .story.vue file too. It happens on RC-9 and RC-10.

Error while collecting story components/molecules/PwLinkInput.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/app.config.mjs" is not defined in node_modules/nuxt/package.json imported from node_modules/nuxt/dist/app/config.mjs
    at new NodeError (node:internal/errors:371:5)
    at throwImportNotDefined (node:internal/modules/esm/resolve:429:9)
    at packageImportsResolve (node:internal/modules/esm/resolve:778:3)
    at moduleResolve (node:internal/modules/esm/resolve:924:21)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

danielroe · 2022-09-20T13:43:38Z

This should be resolved in the edge channel, or in the next RC.

Repro

Let me know if not.

ghost · 2022-09-20T16:02:06Z

Hmm no, still the same error, tested on Stackblitz (but I am not able to get the latest edge release, it still states it is rc.9)

And locally with edge release, still same error message with reference to rc.11

Error while collecting story /home/gmavors/dev/nue/stories/BaseIcon.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/app.config.mjs" is not defined in package /home/gmavors/dev/nue/node_modules/.pnpm/nuxt3@3.0.0-rc.11-27727864.720da64_itqs5654cmlnjraw6gjzqacppi/node_modules/nuxt3/package.json imported from /home/gmavors/dev/nue/node_modules/.pnpm/nuxt3@3.0.0-rc.11-27727864.720da64_itqs5654cmlnjraw6gjzqacppi/node_modules/nuxt3/dist/app/config.mjs
    at new NodeError (node:internal/errors:372:5)
    at throwImportNotDefined (node:internal/modules/esm/resolve:422:9)
    at packageImportsResolve (node:internal/modules/esm/resolve:791:3)
    at moduleResolve (node:internal/modules/esm/resolve:944:16)
    at defaultResolve (node:internal/modules/esm/resolve:1166:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:536:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:250:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36)

danielroe · 2022-09-20T16:31:06Z

You should be able to see it working in the stackblitz I linked.

ghost · 2022-09-20T16:43:53Z

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

saschafuchs · 2022-09-27T13:57:03Z

I have the problem too. In my case (current Nuxt 3 RC11) the error occurs when the component has a Pinia store included or I use useRoute(). <NuxtLink> works without problems.

zoey-kaiser · 2022-09-28T14:51:54Z

I have the problem too. In my case (current Nuxt 3 RC11) the error occurs when the component has a Pinia store included or I use useRoute(). <NuxtLink> works without problems.

Same issue here: sidebase/sidebase#51

danielroe · 2022-09-30T19:38:04Z

If you are experiencing this error (with 'import specifier' error message), would you provide a reproduction? I cannot reproduce it.

As for the issue with NuxtLink in the sandbox above:

You did not define any to prop so <NuxtLink v-if="to" :to="to" class="button"><slot /></NuxtLink> would always fail to render and would likely also error.
<NuxtLink> depends on having nuxt context available so you likely need to stub this out in your project.

ghost · 2022-10-02T11:29:49Z

Regarding the missing props, you were right. But when I use rc.8, I can use <NuxtLink>, with rc.11, an error occurs.

TypeError: Cannot read properties of undefined (reading '_observer') at useObserver (nuxt-link.mjs?v=8c5a6940:204:15) at setup (nuxt-link.mjs?v=8c5a6940:126:28) at callWithErrorHandling (runtime-core.esm-bundler.js:155:22) at setupStatefulComponent (runtime-core.esm-bundler.js:7187:29) at setupComponent (runtime-core.esm-bundler.js:7142:11) at mountComponent (runtime-core.esm-bundler.js:5491:13) at processComponent (runtime-core.esm-bundler.js:5466:17) at patch (runtime-core.esm-bundler.js:5068:21) at mountChildren (runtime-core.esm-bundler.js:5252:13) at processFragment (runtime-core.esm-bundler.js:5425:13)

So this should most likely be fixed in the @histoire/plugin-nuxt package or not?

danielroe · 2022-10-02T11:36:50Z

The change is that now, in nuxt core, <NuxtLink> depends on useNuxtApp() (in order to observe + prefetch links - nuxt/framework#4329).

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?

tobiashm · 2022-10-10T12:35:59Z

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?

danielroe · 2022-10-10T12:46:47Z

@tobiashm A reproduction would be appreciated.

tobiashm · 2022-10-11T06:45:50Z

@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.

Lyokolux · 2022-10-12T12:03:30Z

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?

Here some content: It fails on 2 stories out of 50 for me. Both stories uses a common Vue Component.
I replaced the line with the useFetch in this component and it works:

// const { data } = await useFetch(`/api/v1/links/generate/${cleanedValue}`, { key: new Date().toISOString() })
const data = ref()

danielroe · 2022-10-12T12:10:33Z

Yes, useFetch relies on the nuxt context. Surely this didn't ever work in histoire?

Lyokolux · 2022-10-12T12:12:55Z

Yes, useFetch relies on the nuxt context. Surely this didn't ever work in histoire?

It works with Nuxt RC.8 and Histoire 0.10.7. They are my current working versions.

ghost · 2022-10-12T21:03:08Z

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?

T-Zahil · 2022-12-20T11:07:04Z

Same issue for me when importing a component using the <Icon> from Nuxt Icon Module

david8z · 2023-01-08T08:45:34Z

Why is this closed if it is still happening?

ghost added the to triage This issue needs to be triaged label Sep 11, 2022

Akryum added the nuxt label Sep 17, 2022

Akryum mentioned this issue Sep 23, 2022

Using historie with Pinia #303

Closed

zoey-kaiser mentioned this issue Sep 28, 2022

feat/add pinia store sidebase/sidebase#51

Closed

5 tasks

danielroe mentioned this issue Oct 2, 2022

feat(nuxt): add stubs for useNuxtApp and NuxtLink #307

Merged

10 tasks

Akryum closed this as completed Oct 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ghost commented Sep 11, 2022 •

edited by ghost

Loading

Lyokolux commented Sep 15, 2022 •

edited

Loading

danielroe commented Sep 20, 2022 •

edited

Loading

ghost commented Sep 20, 2022

danielroe commented Sep 20, 2022

ghost commented Sep 20, 2022 •

edited by ghost

Loading

saschafuchs commented Sep 27, 2022

zoey-kaiser commented Sep 28, 2022

danielroe commented Sep 30, 2022

ghost commented Oct 2, 2022

danielroe commented Oct 2, 2022

tobiashm commented Oct 10, 2022

danielroe commented Oct 10, 2022

tobiashm commented Oct 11, 2022

Lyokolux commented Oct 12, 2022 •

edited

Loading

danielroe commented Oct 12, 2022

Lyokolux commented Oct 12, 2022 •

edited

Loading

ghost commented Oct 12, 2022

T-Zahil commented Dec 20, 2022

david8z commented Jan 8, 2023

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

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

Comments

ghost commented Sep 11, 2022 • edited by ghost Loading

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Lyokolux commented Sep 15, 2022 • edited Loading

danielroe commented Sep 20, 2022 • edited Loading

ghost commented Sep 20, 2022

danielroe commented Sep 20, 2022

ghost commented Sep 20, 2022 • edited by ghost Loading

saschafuchs commented Sep 27, 2022

zoey-kaiser commented Sep 28, 2022

danielroe commented Sep 30, 2022

ghost commented Oct 2, 2022

danielroe commented Oct 2, 2022

tobiashm commented Oct 10, 2022

danielroe commented Oct 10, 2022

tobiashm commented Oct 11, 2022

Lyokolux commented Oct 12, 2022 • edited Loading

danielroe commented Oct 12, 2022

Lyokolux commented Oct 12, 2022 • edited Loading

ghost commented Oct 12, 2022

T-Zahil commented Dec 20, 2022

david8z commented Jan 8, 2023

ghost commented Sep 11, 2022 •

edited by ghost

Loading

Lyokolux commented Sep 15, 2022 •

edited

Loading

danielroe commented Sep 20, 2022 •

edited

Loading

ghost commented Sep 20, 2022 •

edited by ghost

Loading

Lyokolux commented Oct 12, 2022 •

edited

Loading

Lyokolux commented Oct 12, 2022 •

edited

Loading