Can't start Nuxt 3 dev server, cannot find module '@volar/typescript/lib/node/proxyCreateProgram

Question

When I try to run npm run dev dev server tries to start but it shows the following error:

Cannot start nuxt:  Cannot find module '@volar/typescript/lib/node/proxyCreateProgram
Require stack:
  - node_modules\vite-plugin-checker\dist\esm\checkers\vueTsc\prepareVueTsc.js

I tried installing @volar as part of my dependencies and vite-plugin-checker but server still not able to run, am I missing some dependency or a configuration in my project? I'm using a Vue 3 with Nuxt 3 library and I want to type check my code when I start my server even though I know it's not the best for performance. I installed vue-tsc@^1 and typescript (as explained in this documentation: https://nuxt.com/docs/guide/concepts/typescript) but it didn't allow me to run the server still

This is my nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  ssr: false,

  // Global page headers: https://go.nuxtjs.dev/config-head
  app: {
    head: {
      title: "customer-portal-frontend",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "description", name: "description", content: "" },
        { name: "format-detection", content: "telephone=no" },
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    },
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    "@/assets/css/main.scss",
  ],

  
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  [
  "@nuxtjs/i18n",
    {
      defaultLocale: "en",
      locales: [
        {
          code: "en",
          file: "en-US.js",
          name: "English",
        },
        {
          code: "es",
          file: "es-ES.js",
          name: "Español",
        },
        {
          code: "fr",
          file: "fr-FR.js",
          name: "Français",
        },
      ],
      lazy: true,
      langDir: "lang/",
      strategy: "no_prefix",
    },
  ], 
  "nuxt-auth-utils", "@pinia/nuxt"],

  runtimeConfig: {
    public: {
      baseURL: process.env.BASE_URL || "http://localhost:3012/",
    },
    app: {
      baseURL: process.env.BASE_URL || "http://localhost:3012/"
    }
  },
  

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  typescript: {
    typeCheck: true
  },
  
})

Answer 1

The documentation refers older Nuxt version. Installing nested dependencies like @volar/typescript that aren't mentioned anywhere but the error usually doesn't help because this doesn't eliminate the root cause.

Current Nuxt version (3.12.4) requires vue-tsc@2, the installation of vue-tsc@1 results in a warning that explains the cause of the problem:

ERESOLVE overriding peer dependency
While resolving: [email protected]
Found: [email protected]
node_modules/vue-tsc
  dev vue-tsc@"1" from the root project

Could not resolve dependency:
peerOptional vue-tsc@">=2.0.0" from [email protected]
node_modules/vite-plugin-checker
  vite-plugin-checker@"^0.7.2" from @nuxt/[email protected]
  node_modules/@nuxt/vite-builder

Conflicting peer dependency: [email protected]
node_modules/vue-tsc
  peerOptional vue-tsc@">=2.0.0" from [email protected]
  node_modules/vite-plugin-checker
    vite-plugin-checker@"^0.7.2" from @nuxt/[email protected]
    node_modules/@nuxt/vite-builder

Here it should be:

npm i -D vue-tsc typescript