cannot import from `nuxt/app` (Package import specifier "#build/app.config.mjs" is not defined) #14801

iamdagy · 2022-09-05T11:47:26Z

Environment

Operating System: MacOS Ventura
Node Version: v16.13.0.
Nuxt Version: 3.0.0-rc.9
Nitro Version: 0.5.0
Package Manager: yarn@1.22.19
Builder: webpack ( I think)
User Config:
Runtime Modules:
"dependencies": {
"@formkit/i18n": "^1.0.0-beta.10",
"@pinia/nuxt": "^0.4.1",
"axios": "^0.27.2",
"pinia": "^2.0.21",
"pinia-plugin-persistedstate": "^2.1.1",
"postmark": "^3.0.1",
"swiper": "^8.3.1",
"vue3-marquee": "^3.0.7"
}
Build Modules:
"devDependencies": {
"@aceforth/nuxt-netlify": "^1.1.0",
"@formkit/nuxt": "^1.0.0-beta.11-0dd967c",
"@iconify-json/heroicons-solid": "^1.1.1",
"@nuxtjs/tailwindcss": "^5.3.2",
"@tailwindcss/typography": "^0.5.7",
"@vueuse/core": "^9.1.1",
"@vueuse/nuxt": "^9.1.1",
"netlify-cli": "^11.5.1",
"nuxt": "3.0.0-rc.9",
"unplugin-icons": "^0.14.5"
}

Reproduction

I upgrade with yarn upgrade and with yarn upgrade nuxt, then yarn upgrade --force, and then yarn upgrade --latest.
I upgraded to RC.9 and a few packages that didn't work I upgraded manually to the edge repository like formkit that needed yarn add @formkit/nuxt@next --dev .

I'will try to make a minimal reproduction, but as the project has many pages and components Im not sure if I have to recreate the whole project.

Describe the bug

When I do yarn build -> the site is completely broken it doesn't load any page.
When I do yarn dev -> the site works ok
When I do yarn check -> There is 1 error

error "@pinia/nuxt#unctx#unplugin#vite@^2.3.0" doesn't satisfy found match of "vite@3.0.9"
error Found 1 errors.

Additional context

No response

Logs

[nuxt] [request error] [unhandled] [500] Package import specifier "#build/app.config.mjs" is not defined in package /Users/david/WebstormProjects/mixverde/.output/server/node_modules/nuxt/package.json imported from /Users/david/WebstormProjects/mixverde/.output/server/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)```

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

emaia · 2022-09-05T12:09:00Z

Same to me. yarn dev works but yarn generate throw an error. My package contains:

"devDependencies": {
    "@nuxt/image": "^0.7.1",
    "@nuxtjs/tailwindcss": "^5.3.2",
    "nuxt": "3.0.0-rc.9",
    "vue-gtag-next": "^1.14.0"
  },
  "dependencies": {
    "@splidejs/vue-splide": "^0.6.7"
  }

Error log:

Nuxt 3.0.0-rc.9 with Nitro 0.5.1                                                                                                                                                             08:58:48
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                                                                                                         nuxt:tailwindcss 08:58:57
ℹ Client built in 2815ms                                                                                                                                                                     08:59:01
ℹ Building server...                                                                                                                                                                         08:59:01
✔ Server built in 806ms                                                                                                                                                                      08:59:02
✔ Generated public .output/public                                                                                                                                                      nitro 08:59:02
ℹ Initializing prerenderer                                                                                                                                                             nitro 08:59:02
ℹ Prerendering 1 initial routes with crawler                                                                                                                                           nitro 08:59:04

 ERROR  [nuxt] [request error] [unhandled] [500] Package import specifier "#build/app.config.mjs" is not defined in package /home/.../node_modules/nuxt/package.jso
n imported from /home/.../node_modules/nuxt/dist/app/config.mjs
  at new NodeError (node:internal/errors:372:5)
  at throwImportNotDefined (node:internal/modules/esm/resolve:461:9)
  at packageImportsResolve (node:internal/modules/esm/resolve:841:3)
  at moduleResolve (node:internal/modules/esm/resolve:997:21)
  at defaultResolve (node:internal/modules/esm/resolve:1218:11)
  at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
  at link (node:internal/modules/esm/module_job:78:36)


 ERROR  [nuxt] [request error] [unhandled] [500] Package import specifier "#build/app.config.mjs" is not defined in package /home/.../node_modules/nuxt/package.jso
n imported from /home/.../node_modules/nuxt/dist/app/config.mjs
  at new NodeError (node:internal/errors:372:5)
  at throwImportNotDefined (node:internal/modules/esm/resolve:461:9)
  at packageImportsResolve (node:internal/modules/esm/resolve:841:3)
  at moduleResolve (node:internal/modules/esm/resolve:997:21)
  at defaultResolve (node:internal/modules/esm/resolve:1218:11)
  at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
  at link (node:internal/modules/esm/module_job:78:36)


 ERROR  [nuxt] [request error] [unhandled] [500] Package import specifier "#build/app.config.mjs" is not defined in package /home/.../node_modules/nuxt/package.jso
n imported from /home/.../node_modules/nuxt/dist/app/config.mjs
  at new NodeError (node:internal/errors:372:5)
  at throwImportNotDefined (node:internal/modules/esm/resolve:461:9)
  at packageImportsResolve (node:internal/modules/esm/resolve:841:3)
  at moduleResolve (node:internal/modules/esm/resolve:997:21)
  at defaultResolve (node:internal/modules/esm/resolve:1218:11)
  at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
  at link (node:internal/modules/esm/module_job:78:36)

  ├─ / (82ms) (Error: [500] Internal Server Error)                                                                                                                                     nitro 08:59:04  
✔ You can now deploy .output/public to any static hosting!

bndrgroup · 2022-09-05T12:15:42Z

+1 - removing vue dependency from package.json and then running the dev server works fine, however when building for production we get:

request error] [unhandled] [500] The requested module 'vue' does not provide an export named 'default'

huang-julien · 2022-09-05T20:50:53Z

does it work if you set experimental.externalVue to false in nuxt.config ?

iamdagy · 2022-09-06T03:18:05Z

does it work if you set experimental.externalVue to false in nuxt.config ?

@huang-julien just tried your suggestion but the same problem continuos. Thanks for the suggestion.

mshadowz · 2022-09-06T04:33:08Z

same here. im using npm and upgrading from rc8

danielroe · 2022-09-06T08:14:18Z

Please ensure you are not importing directly from nuxt/app but from #imports.

boboldehampsink · 2022-09-06T08:44:35Z

Seeing the same on my end with rc9

fatcarter · 2022-09-06T09:15:25Z

+1 Is there a temporary solution in place?

emaia · 2022-09-06T13:00:15Z

Please ensure you are not importing directly from nuxt/app but from #imports.

@danielroe This worked for me. thanks!

Lyokolux · 2022-09-06T14:07:55Z

I bumped my dependency and I am facing this issue with histoire.

I get:
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

The line in question is: import __appConfig from "#build/app.config.mjs";

ady642 · 2022-09-06T17:22:56Z

same for me as @Lyokolux but with vitest

boboldehampsink · 2022-09-06T17:25:28Z

same for me as @Lyokolux but with vitest

I fixed it by inlining nuxt as a dep

iamdagy · 2022-09-06T17:37:53Z

Please ensure you are not importing directly from nuxt/app but from #imports.

@danielroe what do you mean ? should I change
import { defineNuxtConfig } from 'nuxt'
to import { defineNuxtConfig } from '#imports'

or where do I make the change? how did you fixed it @emaia

danielroe · 2022-09-06T17:38:49Z

No, your Nuxt config is the one place you should import anything from nuxt in your project.

iamdagy · 2022-09-06T17:46:33Z

No, your Nuxt config is the one place you should import anything from nuxt in your project.

I see, @danielroe thanks for clarifying that. I changed it in one place but the problem persist.
as far as I can see I was importing from one plugin so I changed it
from
import {defineNuxtPlugin, useCookie} from '#app'
to
import {defineNuxtPlugin, useCookie} from '#imports'

emaia · 2022-09-06T17:47:46Z

@iamdagy I updated my code in plugins folder.

import {defineNuxtPlugin} from "#imports";

@danielroe My nuxt.config.ts was not changed and has import {defineNuxtConfig} from 'nuxt' not "#imports"

iamdagy · 2022-09-06T17:52:12Z

@boboldehampsink how did you add Nuxt as a dependency?
@emaia did you do this also? I have just one plugin for Pinia and did make the change to #imports but Im still seeing the same error.

Thanks

boboldehampsink · 2022-09-06T17:53:38Z

I'm talking about vitest config - see https://vitest.dev/config/#deps-inline

iamdagy · 2022-09-06T17:56:12Z

I'm talking about vitest config - see https://vitest.dev/config/#deps-inline

@boboldehampsink I see, Im not using vitest. thanks for the info.

iamdagy · 2022-09-06T18:00:51Z

No, your Nuxt config is the one place you should import anything from nuxt in your project.

@danielroe can I still import from cue from pages and components? I mean thinks like ref, watch and so on?
import {nextTick, onMounted, ref, watch, watchEffect} from "vue";

I can't find any other import from Nuxt, Nuxt/app, or #app
I also tried deleting the plugin but the error persist.

The plugins is for persist state:
currently

import { createPersistedState } from 'pinia-plugin-persistedstate'
import {defineNuxtPlugin, useCookie} from '#imports'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.$pinia.use(createPersistedState(useCookie))
})```

Lyokolux · 2022-09-07T07:56:44Z

I'm talking about vitest config - see https://vitest.dev/config/#deps-inline

Does anyone knows how to inline deps with vite such as vitest does to fix it ? I don't find it in their docs.

iamdagy · 2022-09-10T04:41:50Z

I was indeed importing from Nuxt/app in another place ( the Pinia Store) after changing it to #imports everything works now.

Thanks

simllll · 2022-09-12T07:19:55Z

I'm confused, so Instead of importing from nuxt/app we have to import from "#imports".. well, it sounds strange, but okay... But if I do so, i get:
ERROR Failed to resolve import "#import" from "src/pages/index.vue". Does the file exist? (repeated 2 times) 09:18:56
Are there some special places where we have to use #imports and some where de are not alloewd to do so? Or do I miss somethign else?

Update: I wrote '#import' instead of '#imports'. Fixed it.

simllll · 2022-09-12T07:21:04Z

And my IDE says now

and there is furthermore also no type inference possilbe now?

danielroe · 2022-09-12T08:19:02Z

@simllll Would you raise a new issue if you can reproduce this? This is what I see...

Lyokolux · 2022-09-12T13:23:56Z

And my IDE says now

and there is furthermore also no type inference possilbe now?

You could run nuxi prepare to generate the .d.ts files again, or restart your TS server. Does the error still appear?

simllll · 2022-09-13T06:38:18Z

Ah yes sorry, i figured it out already here: #14880

poteboy · 2022-09-16T13:09:22Z

You could run nuxi prepare to generate the .d.ts files again, or restart your TS server. Does the error still appear?

I'm still facing the same issue. replacing '#imports' w '#import' does not work either

danielroe · 2022-09-16T13:47:09Z

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

husayt · 2022-10-08T10:37:01Z

Still see this with Histoire

danielroe · 2022-10-08T11:56:31Z

Then please do raise an issue there with a reproduction. Feel free to tag me.

floriankapaun · 2022-10-13T06:45:36Z

This still occurs to me while running tests via yarn vitest using nuxt@3.0.0-rc.11.

Inlining deps as @boboldehampsink mentioned didn't do the trick for me.

My Error still remains:

TypeError: Package import specifier "#build/app.config.mjs" is not defined in package /Users/.../app/node_modules/nuxt/package.json imported from /Users/.../app/node_modules/nuxt/dist/app/config.mjs

After tracking it further down, it seems like the error occurs only if import { useRuntimeConfig } from '#imports' is used. But according to previous comments, this should work, no @danielroe?

danielroe · 2022-10-13T08:25:55Z

Yes, this should work, assuming you are using nuxt/test-utils and not unit testing that component. (Follow https://github.com/nuxt/nuxt.js/issues/13077 for unit testing support.)

ChurikiTenna · 2022-10-25T12:51:37Z

I am experiencing the same issue.
Using rc12.

replacing nuxt/app with #imports removed the error, instead, caused this new error:
Cannot find module '#imports' or its corresponding type declarations.
Editing tsconfig according to #14880 didn't resolve my case.

danielroe · 2022-10-25T13:38:40Z

@ChurikiTenna Would you open a new issue with a reproduction?

MikeAltinget · 2023-01-24T15:08:41Z

@ChurikiTenna Would you open a new issue with a reproduction?

I have a similar issue and have created an issue with reproduction over here: histoire-dev/histoire#430

danielroe · 2023-01-24T15:11:47Z

That isn't a Nuxt issue but to do with the way histoire is loading nuxt composables outside the Nuxt environment. We're tracking improvements that third-party tools can take advantage of via:

BBoehm · 2023-06-06T13:56:08Z

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.

Relied on an external package in the end, since we did not find a better solution
import { useCookie } from '@vue-composable/cookie';

iamdagy added the pending triage label Sep 5, 2022

iamdagy changed the title ~~[nuxt] [request error] [unhandled] [500] in Nuxt 3.RC9 all pages unavailable in Nuxt build~~ Nuxt 3.RC9 all pages unavailable on Nuxt build. Error [nuxt] [request error] [unhandled] [500] Sep 6, 2022

danielroe added the needs reproduction label Sep 6, 2022

danielroe changed the title ~~Nuxt 3.RC9 all pages unavailable on Nuxt build. Error [nuxt] [request error] [unhandled] [500]~~ cannot import from nuxt/app (Package import specifier "#build/app.config.mjs" is not defined) Sep 6, 2022

Lyokolux mentioned this issue Jan 19, 2023

ERROR: Could not resolve "#build/app.config.mjs" #14833

Closed

iamdagy closed this as completed Sep 10, 2022

ghost mentioned this issue Sep 11, 2022

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

Closed

6 tasks

danielroe added the 3.x label Jan 19, 2023

danielroe transferred this issue from nuxt/framework Jan 19, 2023

MikeAltinget mentioned this issue Jan 24, 2023

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

Open

6 tasks

akasection mentioned this issue Feb 28, 2023

Runtime Plugin types as any after nuxt-module-build; possibly #app is unresolved on build nuxt/module-builder#93

Closed

azhirov referenced this issue in azhirov/nuxt-openapi-docs-module Apr 20, 2023

fix vue 3

4b8da4b

cannot import from nuxt/app (Package import specifier "#build/app.config.mjs" is not defined) #14801

cannot import from nuxt/app (Package import specifier "#build/app.config.mjs" is not defined) #14801

Comments

iamdagy commented Sep 5, 2022

Environment

Reproduction

Describe the bug

Additional context

Logs

emaia commented Sep 5, 2022

bndrgroup commented Sep 5, 2022

huang-julien commented Sep 5, 2022

iamdagy commented Sep 6, 2022

mshadowz commented Sep 6, 2022

danielroe commented Sep 6, 2022

boboldehampsink commented Sep 6, 2022

fatcarter commented Sep 6, 2022

emaia commented Sep 6, 2022

Lyokolux commented Sep 6, 2022 • edited

ady642 commented Sep 6, 2022 • edited

boboldehampsink commented Sep 6, 2022

iamdagy commented Sep 6, 2022

danielroe commented Sep 6, 2022 • edited

iamdagy commented Sep 6, 2022 • edited

emaia commented Sep 6, 2022

iamdagy commented Sep 6, 2022

boboldehampsink commented Sep 6, 2022

iamdagy commented Sep 6, 2022

iamdagy commented Sep 6, 2022 • edited

Lyokolux commented Sep 7, 2022

iamdagy commented Sep 10, 2022

simllll commented Sep 12, 2022 • edited

simllll commented Sep 12, 2022

danielroe commented Sep 12, 2022

Lyokolux commented Sep 12, 2022

simllll commented Sep 13, 2022

poteboy commented Sep 16, 2022

danielroe commented Sep 16, 2022

husayt commented Oct 8, 2022

danielroe commented Oct 8, 2022

floriankapaun commented Oct 13, 2022

danielroe commented Oct 13, 2022

ChurikiTenna commented Oct 25, 2022

danielroe commented Oct 25, 2022

MikeAltinget commented Jan 24, 2023

danielroe commented Jan 24, 2023 • edited

BBoehm commented Jun 6, 2023 • edited

cannot import from `nuxt/app` (Package import specifier "#build/app.config.mjs" is not defined) #14801

cannot import from `nuxt/app` (Package import specifier "#build/app.config.mjs" is not defined) #14801

Lyokolux commented Sep 6, 2022 •

edited

ady642 commented Sep 6, 2022 •

edited

danielroe commented Sep 6, 2022 •

edited

iamdagy commented Sep 6, 2022 •

edited

iamdagy commented Sep 6, 2022 •

edited

simllll commented Sep 12, 2022 •

edited

danielroe commented Jan 24, 2023 •

edited

BBoehm commented Jun 6, 2023 •

edited