Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stopped working with vue-tsc 2.0.1 #306

Closed
2 tasks done
Tracked by #159
azygis opened this issue Mar 2, 2024 · 36 comments · Fixed by #327
Closed
2 tasks done
Tracked by #159

Stopped working with vue-tsc 2.0.1 #306

azygis opened this issue Mar 2, 2024 · 36 comments · Fixed by #327
Labels
help wanted Extra attention is needed

Comments

@azygis
Copy link

azygis commented Mar 2, 2024

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
Copy link
Owner

fi3ework commented Mar 2, 2024

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
Copy link

Jogai commented Mar 4, 2024

Maybe pin this issue?

@AuthorProxy
Copy link

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
Copy link
Contributor

johnsoncodehk commented Mar 13, 2024

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

@netroy
Copy link

netroy commented Mar 14, 2024

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
Copy link
Author

azygis commented Mar 14, 2024

@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
Copy link

netroy commented Mar 14, 2024

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

@sullyD64
Copy link

sullyD64 commented Mar 14, 2024

@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 😄 , in the meantime use vue-tsc@^1.8.27!

@cx690
Copy link

cx690 commented Apr 9, 2024

same error

@Magiczne
Copy link

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

tmtr added a commit to tmtr/nuxt3-get-started that referenced this issue May 20, 2024
* vue-tsc は以下の問題により v1 系を使用
```
You may experience issues with the latest vue-tsc and vite-plugin-checker, used internally when type checking. For now, you may need to stay on v1 of vue-tsc, and follow these upstream issues for updates: fi3ework/vite-plugin-checker#306 and vuejs/language-tools#3969.
```
https://nuxt.com/docs/guide/concepts/typescript#type-checking
@maxtomczyk
Copy link

maxtomczyk commented May 20, 2024

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
Copy link

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

@shadowaun
Copy link

shadowaun commented Jun 22, 2024

image

use nuxt 3.11.2 , vue-tsc 1.8.27

nuxt build is error

help me

@marvin-wtt
Copy link

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
Copy link

LTo666 commented Jun 22, 2024

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"
},

@azygis
Copy link
Author

azygis commented Jun 22, 2024

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

@mahula
Copy link

mahula commented Jun 30, 2024

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

@azygis
Copy link
Author

azygis commented Jun 30, 2024

It's been fixed with #327.

@RayGuo-ergou
Copy link

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

@fi3ework
Copy link
Owner

fi3ework commented Jun 30, 2024

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

@yeongsheng-tan
Copy link

yeongsheng-tan commented Jul 1, 2024

@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
Copy link

topvis commented Jul 1, 2024

@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
Copy link
Owner

fi3ework commented Jul 1, 2024

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

@yeongsheng-tan
Copy link

@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
Copy link

topvis commented Jul 1, 2024

@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
Copy link

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

@fi3ework
Copy link
Owner

fi3ework commented Jul 1, 2024

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.

@fi3ework fi3ework unpinned this issue Jul 2, 2024
Evobaso-J added a commit to Evobaso-J/crypto-table-home-assessment that referenced this issue Jul 3, 2024
@realityfilter
Copy link

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
Copy link

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
Copy link
Owner

fi3ework commented Jul 4, 2024

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

@douglasg14b
Copy link

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

@justin-mellor
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet