Nuxt•3w ago

VSCode - TS - Node import issue

Hey, there, my colleague and I are encountering some issue with the VS Code's TypeScript Server. 1.It seems node imports aren't recognized anymore. 2. Auto-Imports are broken. (See linked picture) This issue appears from nowhere. No changes have been made, it's probably a poisoned gift for the beginning 2025. Here are some more details: We're using Nuxt3, pnpm, TS version: 5.7.2, vue-tsc version 2.2.0 To try to fix the bug we have updated VS Code, reinstalled the node nodules, restated the VS Code's TS server multiple times. We have the default tsconfig :

{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"include": ["global.d.ts"]
}

{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"include": ["global.d.ts"]
}

20 Replies

kapa.ai•3w ago

Hi @Shimo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it seems you're experiencing issues with TypeScript recognition and auto-imports in VSCode for your Nuxt 3 project. Let's address this problem step by step: 1. Node imports and auto-imports not being recognized: This issue is likely related to the TypeScript configuration and how VSCode is interpreting it. In Nuxt 3, the TypeScript configuration is typically handled automatically, but there are a few things you can try: a) First, make sure you have run nuxi prepare to regenerate the .nuxt/tsconfig.json file. This file contains important TypeScript configurations for your Nuxt project. b) Check if your tsconfig.json is correctly extending the Nuxt-generated config:

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

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

This should be sufficient for most cases, as mentioned in the Nuxt documentation on tsconfig.json. 2. If the issue persists, you might need to explicitly set some compiler options in your nuxt.config.ts file:

export default defineNuxtConfig({
  typescript: {
    strict: true,
    typeCheck: false,
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler',
        allowImportingTsExtensions: true,
        verbatimModuleSyntax: true,
      }
    }
  }
})

export default defineNuxtConfig({
  typescript: {
    strict: true,
    typeCheck: false,
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler',
        allowImportingTsExtensions: true,
        verbatimModuleSyntax: true,
      }
    }
  }
})

This configuration is based on the Nuxt documentation on TypeScript and might help resolve some of the import issues. 3. For auto-imports specifically, Nuxt 3 should handle these automatically. However, if you're having issues, you can try adding explicit imports for the time being. You can also check the .nuxt/types/imports.d.ts file to see how Nuxt has resolved your auto-imports. 4. If you're using any third-party packages and want them to be auto-imported, you might need to configure this in your nuxt.config.ts file. For example:

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue-i18n',
        imports: ['useI18n']
      }
    ]
  }
})

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue-i18n',
        imports: ['useI18n']
      }
    ]
  }
})

This example is from the Nuxt documentation on auto-imports from third-party packages. 5. Lastly, there's been a recent issue reported with similar symptoms in Nuxt 3.12.4. If you're using this version, you might want to consider downgrading to 3.11.2 temporarily to see if it resolves the issue. This information comes from a GitHub issue discussion. If none of these solutions work, you might want to try clearing your VSCode cache, reinstalling your node modules, or creating a minimal reproduction of the issue to share with the Nuxt community for further assistance. Remember to run nuxi prepare after making changes to your configuration to ensure everything is properly regenerated. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@406136059978579969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ShimoOP•3w ago

1. The nuxi prepare didn't resolved the issue. Here is server/tsconfig.json :

{
"extends": "../.nuxt/tsconfig.server.json",
"include": ["../global.d.ts"]
}

{
"extends": "../.nuxt/tsconfig.server.json",
"include": ["../global.d.ts"]
}

and tsconfig.json :

{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"include": ["global.d.ts"]
}

{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"include": ["global.d.ts"]
}

2. Using the TypeScript config in nuxt.config.ts you gave me didn't help. Here is the config we were using previously :

typescript: {
typeCheck: true
}

typescript: {
typeCheck: true
}

@kapa.ai Somehow, the issue fixed by it self when I alt-tabed, I couldn't identify clearly what solved it. I ran a nuxi prepare and restarted the TS server. It seems stable. Hwo can I make sure it is ?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm glad to hear that the issue seems to have resolved itself. While it's not entirely clear what exactly fixed the problem, the steps you took (running nuxi prepare and restarting the TypeScript server) are good troubleshooting measures. To ensure the stability of your setup and prevent future issues, here are some steps you can take: 1. Verify TypeScript configuration: Make sure your tsconfig.json is correctly set up as mentioned in the Nuxt documentation on tsconfig.json:

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

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

2. Check auto-imports: Verify that auto-imports are working correctly by looking at the .nuxt/types/imports.d.ts file. This file should contain the auto-import declarations for your project, as mentioned in the Nuxt documentation on auto-imports. 3. Run type checking: Use the nuxi typecheck command to run type checking on your project. This can help identify any lingering type issues that might not be immediately apparent in your editor. You can add this as a script in your package.json:

   {
     "scripts": {
       "typecheck": "nuxi typecheck"
     }
   }

   {
     "scripts": {
       "typecheck": "nuxi typecheck"
     }
   }

Then run it with pnpm run typecheck. 4. Monitor for issues: Keep an eye on your development process for any recurrence of the issue. If it happens again, try to note down the exact steps that led to the problem and what resolved it. 5. Update dependencies: Ensure all your dependencies, including Nuxt, TypeScript, and related packages, are up to date. You can use pnpm outdated to check for updates and pnpm update to apply them. 6. Consider using the nightly release channel: If you're comfortable with potentially less stable but more up-to-date versions, you could consider using the Nuxt nightly release channel. This might include fixes for recent issues. To opt in, update your package.json as described in the Nuxt documentation on the nightly release channel:

   {
     "devDependencies": {
       "nuxt": "npm:nuxt-nightly@latest"
     }
   }

   {
     "devDependencies": {
       "nuxt": "npm:nuxt-nightly@latest"
     }
   }

Remember to remove the lockfile and reinstall dependencies after making this change. By following these steps, you can help ensure the stability of your Nuxt 3 project and TypeScript setup in VSCode. If the issue recurs, these measures will also provide you with more information to troubleshoot or report the problem to the Nuxt community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@406136059978579969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ShimoOP•3w ago

@kapa.ai Nevermind, the problem didn't resolved by itself, it just disappeared for a minute. Going on with the proposed solution : 3. I went see the .nuxt/types/imports.d.ts file, the auoimports bugged aren't on this file. 4. I'm on nuxt version ^3.15.0. 5. How can I clear vscode cache ?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion earlier. Let's address your ongoing issue and the new questions you've raised: 3. Regarding the auto-imports not appearing in .nuxt/types/imports.d.ts: This could indicate that Nuxt is not correctly generating the auto-import types for some reason. You might want to check if there are any errors during the build process that could be preventing these types from being generated. 4. Nuxt version ^3.15.0: You're using a very recent version of Nuxt. It's possible that there might be some issues with this version. As a troubleshooting step, you could try downgrading to a slightly older version, such as 3.14.0, to see if the problem persists. 5. Clearing VSCode cache: To clear VSCode cache, you can follow these steps: 1. Close all instances of VSCode. 2. Navigate to the following directory (depending on your operating system): - Windows: %APPDATA%\Code\ - macOS: ~/Library/Application Support/Code/ - Linux: ~/.config/Code/ 3. Delete the following folders: - Cache - CachedData - CachedExtensions - Code Cache 4. Restart VSCode. VSCode documentation provides more information about managing workspace trust and cache. Additional troubleshooting steps you can try: 1. Regenerate Nuxt types: Run npx nuxi prepare to regenerate Nuxt types. This might help resolve issues with auto-imports. 2. Check for conflicting TypeScript versions: Ensure that you don't have conflicting TypeScript versions in your project. You can check this by running pnpm list typescript vue-tsc. 3. Update tsconfig.json: Try adding the following to your tsconfig.json:

   {
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
       "baseUrl": "."
     }
   }

   {
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
       "baseUrl": "."
     }
   }

This change is based on a solution mentioned in a GitHub issue discussion about similar TypeScript recognition problems in WebStorm/IntelliJ. 4. Check Nuxt configuration: In your nuxt.config.ts, ensure you have TypeScript options set correctly:

   export default defineNuxtConfig({
     typescript: {
       strict: true,
       typeCheck: true
     }
   })

   export default defineNuxtConfig({
     typescript: {
       strict: true,
       typeCheck: true
     }
   })

This configuration is based on the Nuxt documentation on TypeScript. If these steps don't resolve the issue, you might want to consider creating a minimal reproduction of the problem and sharing it with the Nuxt community on GitHub. This will allow the maintainers to investigate and potentially fix any bugs in the latest version. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@406136059978579969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ShimoOP•3w ago

@kapa.ai None of these recommendation worked. What about now ?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize that none of the previous recommendations resolved your issue. At this point, it seems we've exhausted the common troubleshooting steps based on the information available in the knowledge sources. However, there are a few more things we can try: 1. Create a minimal reproduction: The most effective way to get help with this persistent issue is to create a minimal reproduction of the problem. This will allow the Nuxt community and maintainers to investigate the issue more thoroughly. You can create a new, bare-bones Nuxt project that exhibits the same problem and share it on GitHub. 2. File an issue on GitHub: With your minimal reproduction, you should file an issue on the Nuxt GitHub repository. Be sure to include: - Your Nuxt version (^3.15.0) - Your tsconfig.json and nuxt.config.ts files - A description of the steps you've already taken to troubleshoot - Any error messages you're seeing in the console or VSCode 3. Check for conflicting extensions: Temporarily disable all VSCode extensions except for the Vue and TypeScript related ones. Sometimes, extensions can interfere with each other and cause unexpected behavior. 4. Try a different IDE: As a temporary workaround, you could try using a different IDE or code editor to see if the issue is specific to VSCode. This could help isolate whether the problem is with your project configuration or with VSCode itself. 5. Reinstall project dependencies: As a last resort, you could try removing your node_modules folder and lockfile, then reinstalling all dependencies from scratch. Sometimes, this can resolve issues with conflicting or corrupted packages.

   rm -rf node_modules
   rm pnpm-lock.yaml
   pnpm install

   rm -rf node_modules
   rm pnpm-lock.yaml
   pnpm install

After this, run npx nuxi prepare again to regenerate the Nuxt types. If none of these steps help, the issue might be more complex than what can be diagnosed without direct access to your project. In this case, seeking help directly from the Nuxt community through GitHub issues or their Discord channel would be the best course of action. They may be able to provide more specific guidance based on the details of your project and the exact nature of the problem you're experiencing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@406136059978579969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ShimoOP•3w ago

@kapa.ai I think this would be going to fare, can I have assistance from a human being ?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with the ongoing issue. You're absolutely right that at this point, direct human assistance would be beneficial. Nuxt provides several ways to get help from the community and maintainers: 1. Nuxt Community Support: This page outlines various ways to get help from the Nuxt community, including GitHub Discussions and Discord. 2. GitHub Discussions: You can start a new discussion here to get help from other Nuxt users and maintainers. 3. Nuxt Discord: Join the Nuxt Discord server to get real-time help from the community. 4. If you need professional support, Nuxt offers a Nuxt Experts program for enterprise-level assistance. Given the complexity of your issue and the fact that we've exhausted common troubleshooting steps, reaching out to these human-powered support channels would be the best next step. They can provide more personalized assistance based on the specifics of your project setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@406136059978579969> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

danielroe•3w ago

does it work if you do not include the include? we recommend modifying typescript.tsConfig in your nuxt config because tsconfig files that extend other tsconfig files can have unexpected behaviour (like totally overwriting the nuxt defaults)

ShimoOP•3w ago

I also just though of removing the "include": ["global.d.ts"] of the tsconfig.json. It seems to work fine for now. I'll do some test / postinstalle / prepare to make sure it's not temporary like it has been previously. Thanks 👍 Hey there, the fix you gave me yesterday seemed to be reliable for the VS Code issue I was having. Thank you. But, I got some additional errors found when doing a code-check with vue-tsc that are supposed to be fixed when my global.d.ts is correctly included in the tsConfig. Can you help me? Here is my typescript field in my nuxt,config.ts :

typescript: {
  typeCheck: true,
  tsConfig: {
    include: ['global.d.ts']
  }
}

typescript: {
  typeCheck: true,
  tsConfig: {
    include: ['global.d.ts']
  }
}

I tryed using a relative path ./ and ../.

danielroe•3w ago

can you provide a reproduction?

ShimoOP•3w ago

If I'm done early on my todays task yes. Meanwhile, here's additional details : My global.d.ts file :

export {};

/* -- Some more code -- */

declare module '@kalimahapps/vue-icons';

export {};

/* -- Some more code -- */

declare module '@kalimahapps/vue-icons';

The error when doing code-check with vue-tsc

pages/edge/connexions/[id].vue:46:29 - error TS2307: Cannot find module '@kalimahapps/vue-icons' or its corresponding type declarations.
  There are types at 'C:/Users/hlrb/Documents/Gitlab/vi-edge/node_modules/@kalimahapps/vue-icons/icons/all.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

46 import { BsArrowLeft } from '@kalimahapps/vue-icons';
                               ~~~~~~~~~~~~~~~~~~~~~~~~

pages/edge/connexions/[id].vue:46:29 - error TS2307: Cannot find module '@kalimahapps/vue-icons' or its corresponding type declarations.
  There are types at 'C:/Users/hlrb/Documents/Gitlab/vi-edge/node_modules/@kalimahapps/vue-icons/icons/all.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

46 import { BsArrowLeft } from '@kalimahapps/vue-icons';
                               ~~~~~~~~~~~~~~~~~~~~~~~~

danielroe•3w ago

you need to remove export {} files that augment need export {}, but files that stub/shim must not have it. (so you might need to split it into two files, depending on what 'some more code' is)

ShimoOP•3w ago

I removed the export {} The rest of the code in my global.d.ts contains other module and global declaration. My college manage to fixe the issues related to the kalimahapps module by updating the nuxt.config.ts TS config :

typescript: {
  // typeCheck: true,
  tsConfig: {
    include: ['../global.d.ts'],
    compilerOptions: {
      moduleResolution: 'nodenext',
      module: 'NodeNext'
    }
  }

typescript: {
  // typeCheck: true,
  tsConfig: {
    include: ['../global.d.ts'],
    compilerOptions: {
      moduleResolution: 'nodenext',
      module: 'NodeNext'
    }
  }

But some other issues appears with primevue imports :

pages/edge/journaux/index.vue:124:33 - error TS2307: Cannot find module '@primevue/core/api' or its corresponding type declarations.

124 import { FilterMatchMode } from '@primevue/core/api';
                                    ~~~~~~~~~~~~~~~~~~~~

pages/edge/journaux/index.vue:124:33 - error TS2307: Cannot find module '@primevue/core/api' or its corresponding type declarations.

124 import { FilterMatchMode } from '@primevue/core/api';
                                    ~~~~~~~~~~~~~~~~~~~~

For now, our temporary solution will probably be putting the previouse and simpler tsConfig and adding // @ts-expect-error above the kalimahapps imports. Actually I found another issue, it might be due to my filre reference in the typescript.tsConfig, the module decleration from my global.d.ts doesn't take effect.

typescript: {
    // typeCheck: true,
    tsConfig: {
      include: ['./global.d.ts']
    }
  },

typescript: {
    // typeCheck: true,
    tsConfig: {
      include: ['./global.d.ts']
    }
  },

Gaming

Programming

VSCode - TS - Node import issue

Did you find this page helpful?