Search code examples
typescriptvue.jsvue-componentloader

Vue with Typescript: Issue encountered when translating Vue application from JavaScript to TypeScript

I'm trying to translate a Vue project from JavaScript to TypeScript without using the class-style syntax.

Here are the steps I followed:

  • I executed: vue add typescript

  • I translated all my .vue files in:

    • Specifying that TypeScript is the used-language: <script lang="ts">
    • export default { -> export default Vue extend({
    • Created a types.d.ts with my custom types and imported it in the types option of tsconfig.json.
    • Specified the types in the code when possible.

However, when I'm running the application, I get this error:

Module parse failed: Unexpected token (23:16)
File was processed with these loaders:
 * ../../../../.nvm/versions/node/v12.18.0/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js
 * ../../../../.nvm/versions/node/v12.18.0/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   data() {
|     return {
>       todos: [] as Todo[]
|     };
|   },

It seems that the loaders the project is using do not recognize the TypeScript syntax. Do you have any idea how to resolve this issue?

Solution

  • Eventually, I found the issue. I was running the app using vue serve instead of npm run serve. For whatever reason, it solved it.