Introduction
- I compile TypeScript using ts-loader in conjunction with webpack.
- When utilizing webpack-dev-server, error messages may be displayed inaccurately.
- Check out the repository: https://github.com/pvcresin/eslint-ts-loader-error.
Issues Encountered
- The eslint-loader does not halt compilation and displays a ts-loader error.
- Even after rewriting the TypeScript code, the ts-loader error persists as an old one.
Step-by-Step Procedure
1. Launch dev-server: Run yarn start = webpack-dev-server --mode development
webpack-dev-server --mode developmentpackage.json
{
"name": "eslint-ts-loader-error",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "2.30.0",
"@typescript-eslint/parser": "2.30.0",
"babel-loader": "8.0.6",
"eslint": "6.8.0",
"eslint-loader": "4.0.2",
"ts-loader": "6.2.2",
"typescript": "3.8.3",
"webpack": "4.33.0",
"webpack-cli": "3.3.4",
"webpack-dev-server": "3.7.1"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist/'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
},
],
},
{
test: /\.(ts|tsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: 'eslint-loader',
options: {
failOnError: true,
},
},
],
},
],
},
};
2. Modify and save .ts file.
main.ts
const a: string = 100;
console.log(a);
-> Error: ts-loader (Expected behavior)
ts-loader: Type '100' is not assignable to type 'string'.
3. Modify and save .ts file.
const a: string = 100;
// console.log(a);
-> Error: eslint-loader, ts-loader (Unexpected)
eslint-loader: 'a' is assigned a value but never used no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.
[Expected]: When there's an error in eslint-loader, the compilation should stop without displaying ts-loader errors.
4. Modify and save .ts file.
const a: boolean = 100;
// console.log(a);
-> Error: eslint-loader, ts-loader (Unexpected)
eslint-loader: 'a' is assigned a value but never used no-unused-vars
ts-loader: Type '100' is not assignable to type 'string'.
The ts-loader error remains outdated, indicating a potential issue with the processing pipeline.
Is this a matter attributable to webpack-dev-server or perhaps eslint-loader?
Any insights or assistance would be greatly appreciated.
System Details
- Operating System: macOS Catalina v10.15.4
- Node.js Version: v12.16.2
- npm Version: v6.14.4
- yarn Version: v1.22.4