Cannot find name 'defineNuxtConfig'.ts(2304)

Question

I tried to install Nuxt 3 layers inside a monorepo with turborepo. and I somehow get error with typescript where it's seems to not able to figure out nuxt

defineNuxtConfig not find

appConfig not found

the ts config file look like this:

{
  "extends": "./.playground/.nuxt/tsconfig.json"
}

and on .playground/.nuxt folder there's tsconfig that look like this(auto-generated):

// Generated by nuxi
{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "skipLibCheck": true,
    "strict": true,
    "allowJs": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "types": [
      "node"
    ],
    "baseUrl": "..",
    "paths": {
      "~": [
        "."
      ],
      "~/*": [
        "./*"
      ],
      "@": [
        "."
      ],
      "@/*": [
        "./*"
      ],
      "~~": [
        "."
      ],
      "~~/*": [
        "./*"
      ],
      "@@": [
        "."
      ],
      "@@/*": [
        "./*"
      ],
      "assets": [
        "assets"
      ],
      "public": [
        "public"
      ],
      "#app": [
        "../../../node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "../../../node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "../../../node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "@vueuse/head": [
        "../../../node_modules/@unhead/vue/dist/index"
      ],
      "#imports": [
        ".nuxt/imports"
      ],
      "#build": [
        ".nuxt"
      ],
      "#build/*": [
        ".nuxt/*"
      ],
      "#components": [
        ".nuxt/components"
      ]
    }
  },
  "include": [
    "./nuxt.d.ts",
    "../**/*"
  ],
  "exclude": [
    "../dist",
    "../.output"
  ]
}

how can i fix this so that defineNuxtConfig is recognized properly?

remove error Cannot find name 'defineNuxtConfig'.ts(2304)

Saunderson

Did u manage to solve the issue? It is impacting auto import on the whole layer which is very annoying to keep consistency across the monorepo – Wengert

Answer 1

I had the same problem, weirdly enough after trying a few things what fixed it for me was changing the VSCode plugin Volar:Typescript Version to Use workspace version THEN changing back to Use VS Code's Version

How:

1. On VSCode press F1 or Ctrl + Shift + P
2. Type Volar: Select Typescript Version
3. Select Use workspace version
4. Repeat steps 1 & 2
5. But this time select Use VS Code's Version

Bam, all my nuxt3 autoimports are correctly typed, don't know why tho.

Halsted

Answer 2

Not an automatic solution, but you can import the symbol manually:

import { defineNuxtConfig } from 'nuxt/config'

Ramsgate

Answer 3

For Vue projects it is recommended to use the Volar Typscript Plug-in if using VSCode. After installing Volar follow these steps to get TS working correctly in Vue and Nuxt projects.

1. In your project workspace, bring up the command palette with Ctrl + Shift + P (macOS: Cmd + Shift + P).
2. Type built and select "Extensions: Show Built-in Extensions".
3. Type typescript in the extension search box (do not remove @builtin prefix).
4. Click the little gear icon of "TypeScript and JavaScript Language Features", and select "Disable (Workspace)".
5. Reload the workspace. Takeover mode will be enabled when you open a Vue or TS file.

Full details can be found here: Vue.js Documentation

Reedy

The extension is deprecated :( – T

Answer 4

After deprecation of Volar, I couldn't make IntelliSense work correctly in Nuxt 3 project, in VSCode for auto imports (if I import manually then it works fine). To solve that, I had to create a tsconfig.json file in the root directory of the project with the following content:

{
  "extends": "./.nuxt/tsconfig.json"
}

Desta

this is working fine, except when you have a .playground folder... for some reason "extends": "./.playground/.nuxt/tsconfig.json" is not working for me – Listen

I have switched from rootDir to srcDir in order to keep default path for extends. – Hoad

Answer 5

Delete the node_modules folder and do a clean install

npm ci

Kyser

Could you please explain the reason why this is required, moreover if possible also provide the command for doing so. – Mcdaniel

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Mcdaniel