Stopped working with vue-tsc 2.0.1

[azygis]

Describe the bug

Since file structuring changed in vue-tsc 2+, checker plugin no longer works as it expects file being in the exact location:

Error: Cannot find module 'vue-tsc/out/index'
Require stack:
- /home/runner/work/pikeo-web/pikeo-web/src/frontend/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/prepareVueTsc.js
...

Reproduction

Install checker plugin, vue-tsc 2.0.1 and enable vueTsc checker.

Expected behavior

Plugin works.

System Info

N/A. Sorry, filling this issue on my phone since I've noticed the issue in my CI build after dependabot update.

Additional context

No response

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[fi3ework]

There's been a breaking change since vue-tsc@2. I took a look into the code and found that it's impossible to use the former method to integrate with vue-tsc 🥲. Since vuejs/language-tools did a lot of great works, which makes the API is not easy to find. Friendly ping @johnsoncodehk, could you give some hint to helping integrate with vue-tsc@2 with vite-pluign-checker. Many thanks!

Some brief conditions:

• The most important feature is to override sendDiagnostics so that the plugin could receive the diagnostics and render it to the browser.
• The plugin could start a watcher with chokidar if needed.

[Jogai]

Maybe pin this issue?

[AuthorProxy]

error when starting dev server:
Error: Cannot find module 'vue-tsc/out/index'
Require stack:
- /Users/www/frontend/admin/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/prepareVueTsc.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Function.resolve (node:internal/modules/helpers:187:19)
    at file:///Users/www/frontend/admin/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/prepareVueTsc.js:11:31
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async createCheckers (file:///Users/www/frontend/admin/node_modules/vite-plugin-checker/dist/esm/main.js:30:37)
    at async config (file:///Users/www/frontend/admin/node_modules/vite-plugin-checker/dist/esm/main.js:63:18)
    at async runConfigHook (file:///Users/www/frontend/admin/node_modules/vite/dist/node/chunks/dep-G-px366b.js:68219:25)
    at async resolveConfig (file:///Users/www/frontend/admin/node_modules/vite/dist/node/chunks/dep-G-px366b.js:67678:14)
    at async _createServer (file:///Users/www/frontend/admin/node_modules/vite/dist/node/chunks/dep-G-px366b.js:64286:20)
    ```

[johnsoncodehk]

@fi3ework I don't know exactly how vite-plugin-checker works, but I tried to replace some API changes that I know for your reference, please let me know if you need any other help. ~~https://github.com/johnsoncodehk/vite-plugin-dts/commit/43b00ded8a6c33fcf432298adc9f6f6ecaf107b2~~ (I found this is vite-plugin-dts not vite-plugin-checker, will check vite-plugin-checker later.)

[netroy]

I used pnpm patch to patch dist/esm/checkers/vueTsc/prepareVueTsc.js, and changed _require.resolve("vue-tsc/out/index"); to _require.resolve("vue-tsc/index");. This seems to have fixed the issue for me.

[azygis]

@netroy define "fixed the issue"? If it builds, but doesn't actually report the problems anymore when there are some, it's not a fix. To me it did not report (at least all; if any) issues in the code.

[netroy]

If it builds, but doesn't actually report the problems anymore when there are some, it's not a fix

Seems to report the exact same set of errors for me as it did before the upgrade.

[sullyD64]

@netroy did you run pnpm patch-commit <tmp-folder-path> after modifying the file? did you update vue-tsc to version 2.0+ before patching it? Because that's what I also did and it didn't work either.

This is [email protected] for reference:

index 4476f608f93257896c67e0fa525562433733a87c..aaea600badc20dc11cee87deac2f9554abf16fc9 100644
--- a/dist/cjs/checkers/vueTsc/prepareVueTsc.js
+++ b/dist/cjs/checkers/vueTsc/prepareVueTsc.js
@@ -42,7 +42,7 @@ const { copy, mkdir } = import_fs_extra.default;
 const _require = (0, import_module.createRequire)(importMetaUrl);
 const _filename = (0, import_url.fileURLToPath)(importMetaUrl);
 const _dirname = (0, import_path.dirname)(_filename);
-const proxyApiPath = _require.resolve("vue-tsc/out/index");
+const proxyApiPath = _require.resolve("vue-tsc/index");
 async function prepareVueTsc() {
   const targetTsDir = import_path.default.resolve(_dirname, "typescript-vue-tsc");
   const vueTscFlagFile = import_path.default.resolve(targetTsDir, "vue-tsc-resolve-path");
diff --git a/dist/esm/checkers/vueTsc/prepareVueTsc.js b/dist/esm/checkers/vueTsc/prepareVueTsc.js
index 94334b8862feddf28cf32cad5a67112eb3a58cec..f5693c9b8ec1b74e54cb18c9ba72bac3b761d231 100644
--- a/dist/esm/checkers/vueTsc/prepareVueTsc.js
+++ b/dist/esm/checkers/vueTsc/prepareVueTsc.js
@@ -8,7 +8,7 @@ const { copy, mkdir } = fsExtra;
 const _require = createRequire(import.meta.url);
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
-const proxyApiPath = _require.resolve("vue-tsc/out/index");
+const proxyApiPath = _require.resolve("vue-tsc/index");
 async function prepareVueTsc() {
   const targetTsDir = path.resolve(_dirname, "typescript-vue-tsc");
   const vueTscFlagFile = path.resolve(targetTsDir, "vue-tsc-resolve-path");

As the author said, there are breaking changes in vue-tsc@^2 which means the current integration won't work with it. We just have to patiently wait for him or @johnsoncodehk to save the day :smile: , in the meantime use vue-tsc@^1.8.27!

[cx690]

same error

[Magiczne]

@johnsoncodehk @fi3ework is there any chance this will be upgraded?

[maxtomczyk]

Patching [email protected] (as proposed by @netroy) with [email protected] fixed issue for me. Of course it doesn't fix vite-plugin-checker, but in my case (Nuxt 3) it allowed me to build project.

Patch for reference:

diff --git a/dist/esm/checkers/vueTsc/prepareVueTsc.js b/dist/esm/checkers/vueTsc/prepareVueTsc.js
index 94334b8862feddf28cf32cad5a67112eb3a58cec..f5693c9b8ec1b74e54cb18c9ba72bac3b761d231 100644
--- a/dist/esm/checkers/vueTsc/prepareVueTsc.js
+++ b/dist/esm/checkers/vueTsc/prepareVueTsc.js
@@ -8,7 +8,7 @@ const { copy, mkdir } = fsExtra;
 const _require = createRequire(import.meta.url);
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
-const proxyApiPath = _require.resolve("vue-tsc/out/index");
+const proxyApiPath = _require.resolve("vue-tsc/index");
 async function prepareVueTsc() {
   const targetTsDir = path.resolve(_dirname, "typescript-vue-tsc");
   const vueTscFlagFile = path.resolve(targetTsDir, "vue-tsc-resolve-path");

[tryforceful]

Bump:

@johnsoncodehk @fi3ework is there any chance this will be upgraded?

This has been broken for many months now and is blocking an entire framework from moving forward

[KnorienChang]

vue-tsc has changed function name. https://github.com/vuejs/language-tools/blob/master/packages/tsc/index.ts#L6

// node_modules\vite-plugin-checker\dist\esm\checkers\vueTsc\prepareVueTsc.js
-const proxyApiPath = _require.resolve("vue-tsc/out/index");
+const proxyApiPath = _require.resolve("vue-tsc/index");

and

// node_modules\vite-plugin-checker\dist\esm\checkers\vueTsc\typescript-vue-tsc\lib\typescript.js
-function createProgram(rootNamesOrOptions, _options, _host, _oldProgram, _configFileParsingDiagnostics) { return require("D:\\workspace\\AI-AS\\ai-sa-h5\\node_modules\\vue-tsc\\index.js").createProgram(...arguments);
+function createProgram(rootNamesOrOptions, _options, _host, _oldProgram, _configFileParsingDiagnostics) { return require("D:\\workspace\\AI-AS\\ai-sa-h5\\node_modules\\vue-tsc\\index.js").run(...arguments);

it works fine!!!

[RayGuo-ergou]

it works fine!!!

~~It is not working, just not throw errors.~~

Seems work in terminal but not overlay in browser, but still could be worth to patch.

Great finding @KnorienChang !

[so1ve]

proxyApiPath is used for collecting diagnostics of vue-tsc to send it to the browser, while the terminal simply runs vue-tsc --noEmit. So, the patch works in the terminal, but not the browser.

[so1ve]

https://github.com/fi3ework/vite-plugin-checker/pull/327

[shadowaun]

use nuxt 3.11.2 , vue-tsc 1.8.27

nuxt build is error

help me

[marvin-wtt]

use nuxt 3.11.2 , vue-tsc 1.8.27

nuxt build is error

help me

This is not related to this issue but it is caused by TS 5.4 I think

[LTo666]

use nuxt 3.11.2 , vue-tsc 1.8.27 nuxt build is error help me

This is not related to this issue but it is caused by TS 5.4 I think

You are right! I encounter the same issue when I was deploying the nuxt project through github action. I have try below action, but neither of them is work:

1. Change node version from 16 to 20
2. Force the version of nuxt to be 3.12.1 in stead of latest version

Then, I try forcing the typescript version to be 5.4.4, it works. Below is what I have changed.

Change in package.json from:

"devDependencies": {
  "typescript": "^5.4.4",
},

To:

"devDependencies": {
  "typescript": "5.4.4",
},

Related package version I am using:

"dependencies": {
  "nuxt": "^3.12.1",
  "vue": "^3.4.21",
  "vue-router": "^4.3.0",
},
"devDependencies": {
  "typescript": "5.4.4",
  "vue-tsc": "^1"
},

[azygis]

@LTo666 I'm afraid it's still not related to this issue in any way. You're better off creating a new one.

[mahula]

Is this issue fixed or why has it been closed? Is there another issue taking care of this problem?

[azygis]

It's been fixed with #327.

[RayGuo-ergou]

If you could take a min of your time to see the commits you will know.

[fi3ework]

Released in 0.7.0. Kudos to @so1ve making this happen.

[yeongsheng-tan]

@fi3ework , very much thank you for making the release happen which I've been eagerly looking forward to.

However, I've upgraded to vite-plugin-checker 0.7.0 with vue-tsc 2.0.24 (here's my package.json). This is my vite.config.ts. When I run vite dev, I get this error:

VITE v5.3.2  ready in 568 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.229:5173/
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

node:internal/event_target:1090
  process.nextTick(() => { throw err; });
                           ^
TypeError [Error]: Cannot read properties of undefined (reading 'useCaseSensitiveFileNames')
    at Object.proxyCreateProgram (<project src root>/node_modules/.pnpm/@[email protected]/node_modules/@volar/typescript/lib/node/proxyCreateProgram.js:33:68)
    at <project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:120478:191
    at Object.<anonymous> (<project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:190853:3)
    at Module._compile (node:internal/modules/cjs/loader:1434:14)
    at Object..js (node:internal/modules/cjs/loader:1518:10)
    at Module.load (node:internal/modules/cjs/loader:1249:32)
    at Function._load (node:internal/modules/cjs/loader:1065:12)
    at Module.require (node:internal/modules/cjs/loader:1271:19)
    at require (node:internal/modules/helpers:123:16)
    at Object.configureServer (file:///<project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/main.js:34:21)

Node.js v22.2.0
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

[topvis]

@fi3ework , very much thank you for making the release happen which I've been eagerly looking forward to.

However, I've upgraded to vite-plugin-checker 0.7.0 with vue-tsc 2.0.24 (here's my package.json). This is my vite.config.ts. When I run vite dev, I get this error:

VITE v5.3.2  ready in 568 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.229:5173/
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

node:internal/event_target:1090
  process.nextTick(() => { throw err; });
                           ^
TypeError [Error]: Cannot read properties of undefined (reading 'useCaseSensitiveFileNames')
    at Object.proxyCreateProgram (<project src root>/node_modules/.pnpm/@[email protected]/node_modules/@volar/typescript/lib/node/proxyCreateProgram.js:33:68)
    at <project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:120478:191
    at Object.<anonymous> (<project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:190853:3)
    at Module._compile (node:internal/modules/cjs/loader:1434:14)
    at Object..js (node:internal/modules/cjs/loader:1518:10)
    at Module.load (node:internal/modules/cjs/loader:1249:32)
    at Function._load (node:internal/modules/cjs/loader:1065:12)
    at Module.require (node:internal/modules/cjs/loader:1271:19)
    at require (node:internal/modules/helpers:123:16)
    at Object.configureServer (file:///<project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/main.js:34:21)

Node.js v22.2.0
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

I had the same issue and resolved it by upgrading typescript to the latest version 5.5.2

[fi3ework]

@topvis @yeongsheng-tan could you provide a minimal repro？

[yeongsheng-tan]

@topvis @yeongsheng-tan could you provide a minimal repro？

@fi3ework here's our github repo, and the frontend code is in the sub-dir frontend.

[topvis]

@topvis @yeongsheng-tan could you provide a minimal repro？

As I said in my previous reply, the issue was resolved by upgrading typescript to the latest version. I remember it's actually a vue-tsc issue instead of this lib's.

[yeongsheng-tan]

@fi3ework , very much thank you for making the release happen which I've been eagerly looking forward to. However, I've upgraded to vite-plugin-checker 0.7.0 with vue-tsc 2.0.24 (here's my package.json). This is my vite.config.ts. When I run vite dev, I get this error:

VITE v5.3.2  ready in 568 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.229:5173/
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

node:internal/event_target:1090
  process.nextTick(() => { throw err; });
                           ^
TypeError [Error]: Cannot read properties of undefined (reading 'useCaseSensitiveFileNames')
    at Object.proxyCreateProgram (<project src root>/node_modules/.pnpm/@[email protected]/node_modules/@volar/typescript/lib/node/proxyCreateProgram.js:33:68)
    at <project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:120478:191
    at Object.<anonymous> (<project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:190853:3)
    at Module._compile (node:internal/modules/cjs/loader:1434:14)
    at Object..js (node:internal/modules/cjs/loader:1518:10)
    at Module.load (node:internal/modules/cjs/loader:1249:32)
    at Function._load (node:internal/modules/cjs/loader:1065:12)
    at Module.require (node:internal/modules/cjs/loader:1271:19)
    at require (node:internal/modules/helpers:123:16)
    at Object.configureServer (file:///<project src root>/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]_@types+n_vyw3lm3vnfszxu6jdwecsmw7fe/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/main.js:34:21)

Node.js v22.2.0
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

I had the same issue and resolved it by upgrading typescript to the latest version 5.5.2

Indeed. @topvis, I upgraded from [email protected] to 5.5.2 and it solved the issue above. Is this something you are aware of and we need to ensure in our package.json @fi3ework ?