vue-template-compiler throws with v3.0.0-alpha.4

[cexbrayat]

Version

3.0.0-alpha.4

Reproduction link

https://github.com/cexbrayat/vtc-repro

Steps to reproduce

This is a simple app created with the CLI, using the vue-next and the TS plugins:

npx @vue/cli create vtc-repro --inlinePreset '{"plugins": {"@vue/cli-plugin-typescript": {"classComponent": false},"vue-cli-plugin-vue-next": {}}}'

The first commit sets the version to Vue 3.0.0-alpha.3 and,
after fixing the component created, running yarn build succeeds.

The second commit bumps Vue to 3.0.0-alpha.4.
When running yarn build, the command now throws:

⠹  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                              14:30:17

 error  in [internal]

INTERNAL ERROR(undefined,undefined) When you use `vue` option, make sure to install `vue-template-compiler`.
stack trace:
Error: When you use `vue` option, make sure to install `vue-template-compiler`.
    at Function.resolveScriptBlock (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/fork-ts-checker-webpack-plugin/lib/VueProgram.js:194:19)
    at Object.host.getSourceFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/fork-ts-checker-webpack-plugin/lib/VueProgram.js:106:45)
    at findSourceFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90581:29)
    at processImportedModules (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90869:25)
    at findSourceFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90634:17)
    at /Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90480:85
    at getSourceFileFromReferenceWorker (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90447:34)
    at processSourceFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90480:13)
    at processRootFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90310:13)
    at /Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:89326:60

After spending some time investigating the issue, I think I've found the root cause.
vue-template-compiler starts by checking that the Vue version is the correct one.
So when using with Vue 3.0.0-alpha.4, we do have this error thrown.

Why is there no error with Vue 3.0.0-alpha.3? Because this line fails when trying to retrieve Vue version with ReferenceError: document is not defined. So the version returned is undefined and the check is OK.

Now that the document is not defined error has been fixed in alpha.4, the check retreives the proper version and fails.

Other info

Quoting @yyx990803 in vuejs/core#670 (comment):

I think this is an issue that should be fixed in vue-cli-plugin-vue-next by not including vue-template-compiler (which is for 2.x only)

[yyx990803]

I see there's already a TODO here: https://github.com/vuejs/vue-cli-plugin-vue-next/blob/master/generator/index.js#L13 Looks like this is something that needs to be dealt with in @vue/cli-service 😅 But let's keep it tracked here.

[cexbrayat]

Yeah I was trying to dig into it myself, but it looks like it's not enough to unistall it indeed ...

In the meantime, I'm using an ugly workaround, that disables the check in the installed vue-template-compiler. It allows to keep using with Vue 3 with the CLI. As it might be useful to others, here it is:

"postinstall": "FILE=./node_modules/vue-template-compiler/index.js; sed \"s/var vueVersion = .*/var vueVersion = undefined/\" $FILE > $FILE.tmp && mv $FILE.tmp $FILE",

[cexbrayat]

Now that Vue CLI was released in v4.2.x with vuejs/vue-cli#5123 vue-template-compiler is no longer required by @vue/cli-service. But if we remove it, in a project using TS, the same error is thrown as fork-ts-checker-webpack-plugin still try to load it

https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/9887bd11addad9331945a2514c3a20c1ccde8716/src/VueProgram.ts#L313-L319

@sodatea @yyx990803 WDYT? Should that be fixed on their part?

[cexbrayat]

Ha I see that the CLI plugin can give options to fork-ts-checker-webpack-plugin I'll try to fix in the CLI plugin then.

[cexbrayat]

I submitted vuejs/vue-cli#5170 which should fix it

[cexbrayat]

Hmm it might not be enough as I realize the API is maybe not the same... fork-ts-checker-webpack-plugin tries to call parseComponent and it does not exist in @vue/compiler-sfc, right @yyx990803 ?

So a better alternative is maybe to disable fork-ts-checker-webpack-plugin if the project is using @vue/compiler-sfc. I submitted an other PR doing that vuejs/vue-cli#5172