Loader reporting syntax errors when dealing with typescript files

[filipekiss]

• Operating System: macOS Mojave 10.14.6
• Node Version: 8.10
• NPM Version: 5.6.0
• webpack Version: 4.41.2
• eslint-loader Version: 3.0.2

Expected Behavior

I expect the loader to respect the .eslintrc.json and parse TypeScript correctly instead of parsing it as JavaScript

Actual Behavior

When I run the webpack config using eslint-loader, it tries to parse typescript files as JavaScript:

When I run eslint directly on the file, the errors are reported correctly:

Code

There's a repo with the code here

How Do We Reproduce?

Clone the repo and run npm run test. To see the expected result, run eslint src/*.ts

[ricardogobbosouza]

Hi @filipekiss Not a problem with eslint-loader, if you remove eslint-loader, same error happens, you need loader for typescript, try this:

// webpack.config.js
....
module: {
  rules: [
    { enforce: 'pre', test: /\.ts$/, exclude: /node_modules/, loader: 'eslint-loader' },
    { test: /\.tsx?$/, loader: "ts-loader" },
  ],
},
...

[filipekiss]

Hi @ricardogobbosouza, thank you for the explanation. It indeed worked when I added the ts-loader rule. Do you have any idea why do I need it, though? This particular case I only want to use webpack to watch-lint files.

Thanks for the help, appreciated! Cheers!

[ricardogobbosouza]

@filipekiss webpack does not handle typescript files. See https://webpack.js.org/guides/typescript/

You can use eslint-watch

[filipekiss]

I mean, do I still need the TS Loader for the eslint-loader in this case? Shouldn't eslint-loader just pass this to eslint and eslint itself will handle the TypeScript stuff?

---

(I'll close the issue because this is more curiosity than an issue related to eslint-loader. Thank you for your help!)

[ricardogobbosouza]

@filipekiss using loader yes, you will need to add ts-loader

You can try using the plugin https://github.com/webpack-contrib/eslint-webpack-plugin

[filipekiss]

Thank you, Ricardo! :D

[alexander-akait]

@ricardogobbosouza what is status of plugin? Any ETA wen we can deprecate loader in favor plugin?

[ricardogobbosouza]

@evilebottnawi The plugin was born very complete, but I need to make some adjustments, especially in the option lintDirtyModulesOnly, unfortunately we still have few downloads and therefore few reports of use. I think we can depreciate the loader as soon as webpack 5 as released

[ricardogobbosouza]

@evilebottnawi I just released eslint-webpack-plugin v0.1.0 I think we can already recommend the plugin, but I still doubt about deprecating eslint-loader

[samywang92]

Edit: never mind I fixed issue! Thank you though :)

@ricardogobbosouza Hi Ricardo, I had a similar issue so I didn't want to open a new one.

When I use typescript 'as' keyword, causes eslint-loader to throw error on the 'as' - " Parsing error: Unexpected token, expected "," " even if I add ts-loader to config. If I remove eslint-loader completely, it works fine and no errors are thrown.

Example code of as usage:

const state = reactive({
      testVariable: [] as Array<string>,
})

I do not get any other issues with typescript syntax such as const newName: string = 'hello' currently using following:

• Operating System: linux(ubuntu)
• Node Version: v12.15
• NPM Version: v6.13.4
• webpack Version: v4.41.5
• eslint-loader Version: v3.0.2

In Nuxt environment