vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

`vue serve` and `vue build` fail to parse Typescript #6531

Open joshhansen opened 3 years ago

joshhansen commented 3 years ago

Version

4.5.13

Reproduction link

https://github.com/joshhansen/vue-cli-issue

Environment info

Linux, Fedora 33, x86_64

ESLint's parser has been set to parse Typescript

Steps to reproduce

(Optional)

yarn global add @vue/cli-service-global @vue/compiler-sfc

(Required)

git clone https://github.com/joshhansen/vue-cli-issue
cd vue-cli-issue
yarn
yarn vue serve App.vue

What is expected?

A minimal web application is served, properly parsing Typescript

What is actually happening?

 ERROR  Failed to compile with 1 error                                                                                                  2:53:09 PM

 error  in ./App.vue?vue&type=script&lang=ts&

Module parse failed: Unexpected token (11:21)
File was processed with these loaders:
 * ../../.config/yarn/global/node_modules/cache-loader/dist/cjs.js
 * ../../.config/yarn/global/node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   name: 'App',
|   computed: {
>       showProgressPanel(): boolean {
|           return true;
|       },

 @ ./App.vue?vue&type=script&lang=ts& 1:0-212 1:228-231 1:233-442 1:233-442
 @ ./App.vue
 @ /home/josh/.config/yarn/global/node_modules/@vue/cli-service-global/template/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.103:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js /home/josh/.config/yarn/global/node_modules/@vue/cli-service-global/template/main.js

I had introduced "paths" into my tsconfig.json. This caused an error with vue-cli-service serve which doesn't seem able to handle that feature. So I tried using the more modern replacement, vue serve, with the above result. I had been previously able to serve Typescript code using vue-cli-service serve; however, the utility of using "paths" is great enough that I thought I'd try to switch over to vue serve. But this isn't working either.

wyiqin commented 3 years ago

1.npm install @vue/cli-plugin-typescript. 2.add your tsconfig.json.

joshhansen commented 3 years ago

The issue persists even after adding @vue/cli-plugin-typescript. I pushed this change to the above reproduction repository.

The issue occurs in the absence of a tsconfig.json. I had only mentioned that tangentially.