[Chartjs]-VueJS TypeScript using ChartJS – Parsing error: '}' expected

1πŸ‘

βœ…

For the meanwhile, I’ve removed lang="ts" from my <script> tag in the .vue component file

1πŸ‘

I think the issue is on the line :

const canvas = <HTMLCanvasElement> document.getElementById('myChart');

because of the case, you can use the as syntax to avoid the lint issue

const canvas = document.getElementById('myChart') as HTMLCanvasElement;

If you still have an issue check you .eslint.*, mine is like this:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  plugins: ['vue','typescript'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/essential',
    '@vue/typescript',
  ],
}

-1πŸ‘

eslintrc:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [
      'warn',
      {
        printWidth: 140,
        jsxBracketSameLine: true,
        singleQuote: true,
        'no-multiple-empty-lines': ['error', { max: 2 }]
      }
    ]
  },
  parserOptions: {
    parser: 'typescript-eslint-parser'
  }
};

-1πŸ‘

tsconfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jquery"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Leave a comment