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

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 https://github.com/vuejs/vue-next/issues/670#issuecomment-579785869:

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)

[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]

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 https://github.com/vuejs/vue-cli/pull/5172