Webpack-encore: Parsing Error: Unexpected token typescript inside Vue files

[masterofnothing11]

Hello, first of all I would like to state I know this is not the right place to make such question but I have tried other means but got no response. This leaves me no choice other than to come to the repository itself.

I'm getting the following error when watching for files rebuild from ESLint

/var/www/assets/js/app/pages/ErpFlex.vue
  140:10  error  Parsing error: Unexpected token

   9 |   @Getter getTotal: number;
  10 | 
> 11 |   private resendOrder: any = null;
     |           ^
  12 |   private loadingOrders: boolean = true;
  13 |   private callout: object = {
  14 |     show: false,

In my webpack configuration I have added typeScriptLoader:

.enableTypeScriptLoader(function (typeScriptConfigOptions) {
        typeScriptConfigOptions.transpileOnly = true;
        typeScriptConfigOptions.configFile = path.resolve(__dirname, 'tsconfig.json');
    })

My tsconfig.json file looks like:

{
  "exclude": [
    "vendor",
    "/node_modules/"
  ],
  "include": [
    "**/*.ts",
    "**/*.vue"
  ],
  "compilerOptions": {
    "target": "es6",
    "allowJs": true,                       /* Allow javascript files to be compiled. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

Probably I'm looking at something pretty stupid from my part here. Any help would be much appreciated

[Lyrkan]

Hi @masterofnothing11,

You'll need to configure ESLint to use typescript-eslint: https://github.com/typescript-eslint/typescript-eslint#how-do-i-configure-my-project-to-use-typescript-eslint

This can be done by either using the options callback of Encore.enableEslintLoader() or through an .eslintrc.* file (note that in the latter case you'll currently have to delete options.parser in the enableEslintLoader's callback to be able to override the parser from an external file)

[masterofnothing11]

@Lyrkan Thank you for the answer.
I have already done that with the following:

.enableEslintLoader(eslLinterLoaderOptions => {
        eslLinterLoaderOptions.configPath = path.resolve(__dirname, '.eslintrc.js');
        eslLinterLoaderOptions.ignorePath = path.resolve(__dirname, '.eslintignore');
        eslLinterLoaderOptions.cache = false;

        // Encore enforce parser option to babel-eslint and its not compatible with eslint-plugin-vue
        // Check the following link: https://github.com/symfony/webpack-encore/issues/656
        delete eslLinterLoaderOptions.parser;
    })

    .configureLoaderRule('eslint', loader => {
        loader.test = /\.(jsx?|vue)$/;
    })

with my .eslintrc file:

module.exports = {
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "allowImportExportEverywhere": true,
        "ecmaFeatures": {
            "legacyDecorators": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        },
        "ecmaVersion": 6,
        "sourceType": "module",
    },
    "extends": [
        "plugin:vue/base",
        "airbnb-base"
    ],
    "rules": {
        "indent": [2, 4],
        "vue/html-indent": [2, 4],
        "camelcase": [2, {properties: "always"}],
        "new-cap": [2, {"newIsCap": true}],
        "padding-line-between-statements": [
            "error",
            {blankLine: "always", prev: ["const", "let", "var"], next: "*"},
            {blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"]}
        ],
        "space-infix-ops": "error",
        "no-var": "error",
        "one-var": [2, "always"],
        "vars-on-top": "error",
        "quotes": ["error", "single"],
        "prefer-template": "error",
        "eqeqeq": "error",
        "default-param-last": ["error"],
        "prefer-arrow-callback": "error",
        "no-param-reassign": [
            "error",
            {
                "props": true,
                // ignore vuex files
                "ignorePropertyModificationsFor": [
                    "state"
                ]
            }
        ],
        "import/no-cycle": "off",
        "import/no-unresolved": "off",
        "@typescript-eslint/explicit-member-accessibility": "off"
    },
    "env": {
        browser: true,
        es6: true,
        node: true
    },
};

I think everything is well configured but I still can't figure out on why I'm getting such error.

[Lyrkan]

You're not using typescript-eslint in your .eslintrc file, so everything is going through babel-eslint which does not support TypeScript.

Replace babel-eslint by @typescript-eslint/parser and add the @typescript-eslint plugin to your conf (see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage).

[masterofnothing11]

@Lyrkan Thank you for your answer and helping me out.

I have installed typescrpit loader: yarn add @typescript-eslint/eslint-plugin --save-dev and added to the .eslintrc.js file:

 "parserOptions": {
        "parser": "@typescript-eslint/parser"
},
"plugins": ["@typescript-eslint"]

and now I'm getting a error Parsing error: Cannot find module '@typescript-eslint/parser' any idea on why?

[Lyrkan]

You only added the @typescript-eslint/eslint-plugin to your dependencies, the parser is in another package: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser

[masterofnothing11]

@Lyrkan Solved my problem. Thank you very much. Have a wonderful week :+1:

[Uhelliton]

@Lyrkan Solved my problem.

[my-name-is-nheo]

@Lyrkan thank you very much