Typescript (at-loader) compiler errors in WebPack

Question

I am using Visual Studio 2017 to write an Angular SPA, but I use WebPack to run it. Currently I let VS build the Typescript into JS and WebPack uses that JS to create the build artefact.

I want to move to WebPack building the Typescript so its easier for our CI server to build the project. For some reason VS can compile the Typescript fine but awesome-typescript-loader cannot.

My Typescript is written using ES6 modules i.e.

import * as angular from "angular";
import * as moment from "moment";
import "angular-material";

import { ExpensesService } from "../../main/components/reports/expenses/expenses.service";
import { IJourney } from "../../Interface/IJourney";

I get these errors from WebPack / Awesome-Typescript-Loader when I compile run it. Note that all of these are in the node_modules folder and not my code (that I can tell?)

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:32:11 TS2451: Cannot redeclare block-scoped variable 'Error'.

ERROR in [at-loader] ./node_modules/@uirouter/angularjs/lib-esm/services.d.ts:9:9 TS2717: Subsequent property declarations must have the same type. Property 'stateProvider' must be of type 'StateProvider', but here has type 'StateProvider'.

ERROR in [at-loader] ./node_modules/awesome-typescript-loader/lib/runtime.d.ts:20:13 TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'WebpackRequire'.

ERROR in [at-loader] ./node_modules/tsutils/src/typeguard.d.ts:140:70 TS2694: Namespace 'ts' has no exported member 'EnumLiteralType'.

ERROR in [at-loader] ./node_modules/uri-js/src/punycode.d.ts:9:17 TS2714: The expression of an export assignment must be an identifier or qualified name in an ambient context.

My tsconfig.json (which I force VS to use) is

{
    "compileOnSave": true,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "lib": [ "es2015" ],
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": false,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude": [
        "typings"
    ],
    "include": [
        "./src/**/*.ts",
        "node_modules/**/*.d.ts",
        "scripts/typings/d.ts"
    ],
    "files": [
        "./src/app/bootstrap.ts"
    ]
}

I won't copy packages.json here for brevity, but I include all appropriate npm packages i.e. @types/angular, @types/angular-material etc.

In my WebPack.config here is the relevant setup

module.rules = {
    {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ["awesome-typescript-loader"],
    },
}
resolve: {
    extensions: [".ts"],
    modules: [node_modules"]
},

I think the cause of the error is you're compiling the definition files, try removing "node_modules/**/*.d.ts" and "scripts/typings/d.ts" in tsconfig.json . — John Velasquez
– John Velasquez, Commented Apr 19, 2018 at 9:20
@AmayaSan Thank you so much! Could you write an answer please so I can accept! — Chris
– Chris, Commented Apr 19, 2018 at 9:26

mPrinC · Accepted Answer · 2020-09-12 15:01:06Z

11

In my case, excluding in the tsconfig.json didn't work as it works for not implicit compiling, but still goes to the files if explicitly required, and exclude anyway work just to reduce include set.

Adding skipLibCheck to tsconfig.json solved the problem:

{
    "compilerOptions": {
        // ...
        "skipLibCheck": true,
    },
    // ...
}

NOTE: This was using awesome-typescript-loader in webpack. With ts-loader i didn't have problem.

answered Sep 12, 2020 at 15:01

mPrinC

9,4332 gold badges37 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Velasquez · Accepted Answer · 2018-04-19 09:30:48Z

3

The cause of the error is you're compiling the definition files

To fix it

removing "node_modules/**/*.d.ts" and "scripts/typings/d.ts"

in tsconfig.json will resolve your problem.

answered Apr 19, 2018 at 9:30

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

Typescript (at-loader) compiler errors in WebPack

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related