CODEWITHSUNDEEP
typescriptvue.jsbabeljseslintvuejs3
Erik Lilja
Erik Lilja

Reputation: 31

Unable to lint vue 3 typescript app, building works

We are currently experiencing the following issue. We can build our app, but unable to lint using the tools for vue(vue-cli-service ...).

Hot-reloading works for the first time. Then after saving a file, an error message of "Parsing error: Unexpected token <" is yielded.

$ npx vue-cli-service lint
error: Parsing error: Unexpected token < at src/App.vue:1:1:
> 1 | <template>
    | ^
  2 |     <div>
  3 |         <div class="loading__container" v-if="loading">
  4 |           <div class="loading__spinner">

However, building the app works. It returns valid dist-files.

$ npx vue-cli-service build
 DONE  Compiled successfully in 6529ms                                                                                                                                                            4:10:07 PM

  File                                 Size                                                                             Gzipped

  dist/js/chunk-vendors.109b2beb.js    159.88 KiB                                                                       57.38 KiB
  dist/js/app.109b2beb.js              51.48 KiB                                                                        12.35 KiB
  dist/css/app.404c70f3.css            0.17 KiB                                                                         0.14 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Our package.json.

{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fullstory/browser": "^1.4.6",
    "core-js": "^3.6.5",
    "git-describe": "^4.0.4",
    "vue": "3.0.5"
  },
  "devDependencies": {
    "@sentry/webpack-plugin": "^1.14.0",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "@vue/eslint-config-typescript": "^5.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "7.3.0",
    "serverless": "^2.8.0",
    "serverless-finch": "^2.6.0",
    "serverless-s3-deploy": "^0.9.0",
    "typescript": "^4.1.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Upvotes: 0

Views: 290

Answers (1)

Erik Lilja
Erik Lilja

Reputation: 31

I switched to the Vue 3 composition api which is much better suited for typescript.

Upvotes: 1

Related Questions