Search code examples
javascripttypescriptvue.jsvue-cli

Unexpected token for private variables in TypeScript 2.9.1

I am currently working with VueJS and TypeScript 2.9.1. I am creating a library and converted it to typescript later on.

When building the lib with vue-cli the typescript linter says the following error message:

WARNING  Compiled with 1 warnings                                                                                                                                                                            5:57:15 PM
error: Parsing error: Unexpected token

  36 |
  37 | export default class Graph {
> 38 |   private _nodes: GraphNodeList = {}
     |           ^
  39 |   private _edges: EdgeList = {}
  40 |
  41 |   layout: Layout | undefined at src/Graph.ts:38:11:

If I delete the 'private' keyword the errors are gone. But I know that the private keyword is allowed in typescript. They also write it like this in the documentation.

Does anyone know why this happens? Would be cool to use private variables in the future.

tslint.json

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

Package.json (reduced)

{
  ...
  "scripts": {
    "build": "vue-cli-service build --target lib src/main.ts",
    "dev": "vue-cli-service build --mode development --name vue-flowy --watch --target lib src/main.ts",
  },
  "dependencies": {
    "d3": "^5.4.0",
    "dagre-d3-renderer": "^0.5.8",
    "graphlibrary": "^2.2.0",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^6.0.0"
  },
  "devDependencies": {
    "@types/debug": "^0.0.30",
    "@types/jest": "^22.0.1",
    "@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.11",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.11",
    "@vue/cli-plugin-typescript": "^3.0.0-beta.15",
    "@vue/cli-plugin-unit-jest": "^3.0.0-beta.11",
    "@vue/cli-service": "^3.0.0-beta.11",
    "@vue/eslint-config-prettier": "^3.0.0-beta.11",
    "@vue/eslint-config-typescript": "^3.0.0-beta.11",
    "@vue/test-utils": "^1.0.0-beta.16",
    "debug": "^3.1.0",
    "jest": "^22.4.3",
    "node-sass": "^4.9.0",
    "prettier-eslint-cli": "^4.7.1",
    "sass-loader": "^7.0.1",
    "ts-jest": "^22.4.6",
    "typescript": "^2.8.3",
    "vue": "^2.5.16",
    "vue-eslint-parser": "^2.0.3"
  },
  "module": "dist/vue-flowy.es.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Patcher56/vue-flowy.git"
  },
  "types": "types/index.d.ts",
  "files": [
    "dist",
    "src"
  ],
  "main": "dist/vue-flowy.umd.js",
  ...
  "peerDependencies": {
    "vue": "^2.5.16"
  },
  ...
}

vue.config.js

module.exports = {
  css: {
    extract: false
  }
}

build/index.ts

'use strict'
// Template version: 1.2.7
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    host: 'localhost',
    port: 8080,
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,
    useEslint: true,
    showEslintErrorsInOverlay: true,
    devtool: '#source-map',
    cacheBusting: true,
    cssSourceMap: false
  },

  bundle: {
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: false,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  },

  docs: {
    index: path.resolve(__dirname, '../docs/index.html'),
    assetsRoot: path.resolve(__dirname, '../docs'),
    assetsPublicPath: '',
    devtool: '#source-map',
    productionSourceMap: false
  }
}

Link to whole Repository: https://github.com/Patcher56/vue-flowy/tree/02c6861e58ffe9ed2f38282e457e7524b8f4cbe8

Solution

  • I cleaned up my code a lot and removed some unused dependencies. I also cleaned up my tslint.json. The problem is gone now.

    I think the problem was that there were too many dependencies blocking each other. Sorry for the time invested by everyone answered this question.