fi3ework/vite-plugin-checker

Stopped working with vue-tsc 2.0.1

azygis opened this issue · 36 comments

azygis commented

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

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

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.
  • ❤️11
  • 👀5
Jogai commented

Maybe pin this issue?

  • 👍24
AuthorProxy commented 
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 commented

@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.
johnsoncodehk/vite-plugin-dts@43b00de (I found this is vite-plugin-dts not vite-plugin-checker, will check vite-plugin-checker later.)

  • 👍5
  • 🎉7
  • ❤️9
netroy commented

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 commented

@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.

  • 👍2
netroy commented

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.

image

  • 👍1
sullyD64 commented

@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 vite-plugin-checker@0.6.2.patch 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 😄 , in the meantime use vue-tsc@^1.8.27!

  • 😄5
cx690 commented

same error

  • 👍1
  • 👎5
Magiczne commented

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

  • 👍22
  • 😕1
maxtomczyk commented

Patching vite-plugin-checker@0.6.4 (as proposed by @netroy) with vue-tsc@2.0.19 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");
  • 👍2
tryforceful commented

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

  • 👍15
  • 😕6
KnorienChang commented

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!!!

  • ❤️2
  • 🚀1
RayGuo-ergou commented

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 commented

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 commented

#327

  • 🎉8
shadowaun commented

image

use nuxt 3.11.2 , vue-tsc 1.8.27

nuxt build is error

help me

marvin-wtt commented

image

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 commented

image
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"
},
  • 👍2
  • ❤️2
azygis commented

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

  • 👍3
mahula commented

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

azygis commented

It's been fixed with #327.

RayGuo-ergou commented

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

fi3ework commented

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

  • 🎉10
  • ❤️1
yeongsheng-tan commented

@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/@volar+typescript@2.3.4/node_modules/@volar/typescript/lib/node/proxyCreateProgram.js:33:68)
    at <project src root>/node_modules/.pnpm/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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.
  • 👍6
topvis commented

@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/@volar+typescript@2.3.4/node_modules/@volar/typescript/lib/node/proxyCreateProgram.js:33:68)
    at <project src root>/node_modules/.pnpm/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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

  • 👍1
fi3ework commented

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

yeongsheng-tan commented

@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 commented

@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 commented

@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/@volar+typescript@2.3.4/node_modules/@volar/typescript/lib/node/proxyCreateProgram.js:33:68)
    at <project src root>/node_modules/.pnpm/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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/vite-plugin-checker@0.7.0_eslint@8.57.0_optionator@0.9.4_typescript@5.4.5_vite@5.3.2_@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 typescript@4.5.4 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 ?

  • 👍1
fi3ework commented

We should add a TS version check for vue-tsc. For now, vue-tsc only works with TS5 https://vite-plugin-checker.netlify.app/checkers/vue-tsc.html#installation.

  • 👍3
realityfilter commented

I had version 5.4.5 of typescript installed. That version is having the same error Cannot read properties of undefined (reading 'useCaseSensitiveFileNames'). Only the current 5.5.3 works. Maybe typescript 5.0.0 is not enough as a requirement?

yeongsheng-tan commented

I had version 5.4.5 of typescript installed. That version is having the same error Cannot read properties of undefined (reading 'useCaseSensitiveFileNames'). Only the current 5.5.3 works. Maybe typescript 5.0.0 is not enough as a requirement?

You'll need to upgrade to TS version 5.5.x (I think current latest is 5.5.3).

fi3ework commented

I speculate that each version of vue-tsc has different minimum TypeScript version requirements.

douglasg14b commented

After upgrading TS, new errors: pluginContext.vueCompilerOptions.plugins is not iterable

  • 👍3
  • 😕1
justin-mellor commented

After upgrading TS, new errors: pluginContext.vueCompilerOptions.plugins is not iterable

This has been raised in vuejs/language-tools#4755 and #395