Cannot find module #app in Nuxt 3 plugin

[jonybekov]

Just installed fresh beta version of Nuxt 3 and copy & pasted example https://v3.nuxtjs.org/docs/usage/state#example

It's either Volar cannot find type definition for #app or it's Nuxt 3 lacking the d.ts file for #app module

[igorjacauna]

~It's a Nuxt 3 documentation issue. You should use nuxt3 instead #app~

See @pi0 comment below

[jonybekov]

Thanks. Closing this

[pi0]

For clarification: It is not a typo. Shims for #app and other virtual modules are generated via nuxt.d.ts. If not registered it is a bug in nuxt3.

[pi0]

As a quick workaround, you can update tsconfig.json with paths. We are working on auto-generation feature to fix the root cause.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": false,
    "allowJs": true,
    "resolveJsonModule": true,
    "types": [
      "node"
    ],
    "paths": {
      "#app": [
        "./node_modules/nuxt3/dist/app/index"
      ]
    }
  }
}

[sduduzog]

To add extra cheese to @pi0 's comment above, running nuxi dev generates a tsconfig.json file that lives in .nuxt folder, so adding "extends": "./.nuxt/tsconfig.json" to your tsconfig.json solves the problem, see https://v3.nuxtjs.org/getting-started/bridge#update-tsconfigjson

[aseidma]

Also note that using "extends": "./.nuxt/tsconfig.json" does not extend the "paths" property in your own tsconfig.json. Instead the "paths" property from ./.nuxt/tsconfig.json is overwritten entirely by your own "paths" value.

This won't work (e.g. lead to red squiggles from ts/volar/vetur when importing from #add):

{
    "extends": "./.nuxt/tsconfig.json",
    "compilerOptions": {
        "target": "ES2018",
        "module": "ESNext",
        "moduleResolution": "Node",
        "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "sourceMap": true,
        "strict": true,
        "noEmit": true,
        "baseUrl": ".",
        "experimentalDecorators": true,
        "paths": {   // This overwrites every "paths" mapping from ./.nuxt/tsconfig.json!
            "~/*": ["./*"],
            "@/*": ["./*"],
        },
        "types": [
            "@types/node",
            "@nuxt/types",
            "@types/jest",
        ]
    },
    "exclude": ["node_modules", "functions"]
}

This can lead to very frustrating behaviour when migrating from nuxt 2 (where you had to define your own path mappings in tsconfig.json). When migrating, make sure to remove the "paths" property from your tsconfig.json in order to adapt the one provided by ./.nuxt/tsconfig.json.

Perhaps a remark in the documentation (at least within the migration guide) would be useful?

[davidnknight]

This is still the case with a new Nuxt 3 module.

I create a new module using: npx nuxi init -t module my-module

Install dependencies: cd my-module && npm install

I then open in Visual Studio Code (v1.69.1) with Volar (v0.39.1), open src/runtime/plugin.ts and hover #app in the import statement and see exactly the same as @jonybekov reported back in October 2021.

[aqilc]

@davidnknight Same for me

I've been trying to work around it, but it's extremely frustrating encountering non-existent linter errors and unresolved types.

I've tried every solution in this thread, but none of them worked, and some of them broke other stuff.

[brandonbronisz]

@davidnknight @AqilCont if you are referring to the nuxt 3 module template, ~/playground/.nuxt/tsconfig.ts is missing the include for the module src dir. to fix this modify ~/tsconfig.ts in your root to be the following:

{
  "extends": "./playground/.nuxt/tsconfig.json",
  "include": ["./src"]
}

[aqilc]

@davidnknight @AqilCont if you are referring to the nuxt 3 module template, ~/playground/.nuxt/tsconfig.ts is missing the include for the module src dir. to fix this modify ~/tsconfig.ts in your root to be the following:

{
  "extends": "./playground/.nuxt/tsconfig.json",
  "include": ["./src"]
}

Sorry, this only causes new errors for me. I don't have a playground dir, so I'm guessing we used a different template, and only included whatever was in the include. I've tried both Volar and Vetur and none of them seem to accept it.

[gluharry]

I am experiencing a similar thing, but mainly for components when building a module with nuxt/kit 3.4.0.

I have registered some vue sfc components in runtime/components and i get Cannot find module '#app' or its corresponding type declarations..

app in composables works fine.

[aqilc]

Why is this closed? It's still an issue. @harryyaprakov and I are still experiencing the same tiring squigglies everywhere.

[danielroe]

This is a very old issue; please open a new one if you are experiencing a problem. That said, you need to enable typescript.includeWorkspace for the Nuxt types to apply within your module code:

https://github.com/nuxt/starter/blob/module/.nuxtrc#L2

[imcm7]

"#app": [
        "./node_modules/nuxt3/dist/app/index"
      ]
    }

Is 2023, few days to October and I have the same error

[so1ve]

@imcm7 Please open a new issue with minimal reproduction

[imcm7]

@so1ve please resolve captcha to demonstrate you are not a bot, because I think you use automation tools :)

That to put in nuxt config typescript.includeWorkspace=true?

I already added it in past to nuxt config and have that issue.

[imcm7]

typescript: {
        includeWorkspace: true,
        typeCheck: true,
        shim: false, // For TypeScript Vue Plugin (Volar).
    },

[sduduzog]

There's about 11 other participants in this issue who would really appreciate if you opened another issue for this @imcm7

[imcm7]

@sduduzog I not understand how it work, in one page with nuxt page (index.vue) in the same vs code window it not found '#app', in other tab is opened page (other.vue) in the same time and all work well. Close vs code, stop nuxt dev. Restart nuxt in dev, open vs code, it not found '#app' in all pages. Reload vs code window (ctr+shift+p) not help.

Also it say windows don't have property xxx. If I open in other tab in vs code index.d.ts where I added it to global interface window all works.

[imcm7]

@sduduzog some one of them in elapsed time retired and no longer need it

[imcm7]

Cannot find name 'useRuntimeConfig'.ts

Cannot find '~/interfaces/bla-bla-bla' Cannot find module '~/composables/use-http.composable'

But when I left project all was relatively ok

[GexideL]

"#app": [
        "./node_modules/nuxt3/dist/app/index"
      ]
    }

Is 2023, few days to October and I have the same error

@imcm7 Path has been changed to "./node_modules/nuxt/dist/app/index"

[GarethWoodman]

For any poor soul who also had their keyboard bloodied by this:

❌ import { defineNuxtPlugin } from '#app' ✅ import { defineNuxtPlugin } from 'nuxt/app'

[emink92]

For any poor soul who also had their keyboard bloodied by this:

❌ import { defineNuxtPlugin } from '#app' ✅ import { defineNuxtPlugin } from 'nuxt/app'

I am literally going crazy for this. After adding this line I get the error:

SyntaxError: Cannot use 'import.meta' outside a module

The plugin file:

import { defineNuxtPlugin } from 'nuxt/app'

export default defineNuxtPlugin((nuxtApp) => {
  console.log('test')
})

[danielroe]

You should import from #imports or #app, not from nuxt/app.

[BurakVirtue]

You should import from #imports or #app, not from nuxt/app.

The problem is definitely chronic, it needs to be fixed.

[davidstackio]

Restarting VS Code worked for me.

[SergioSuarezDev]

I have the same error trying to test with jest in nuxt 3.