TypeScript issue - TypeError: Cannot read property 'watchRun' of undefined

Question

Im trying to convert the JSX files of my ReactJS app, one by one to TS. Hence I will have both JSX and TS files running at the same time. (Hence added rules for both in webpack as given below):

This is the part of my webpack config that processes jsx and ts files:

module: {
        rules: [
            {
            test: /\.ts$/,
            exclude: /node_modules/,
            use: ["awesome-typescript-loader"]
        },
        {
            test: /\.(jsx?)$/,
            exclude: /node_modules/,
            use: ["babel-loader"]
        },
        ]
    }

But when I run webpack, Im getting the following error:

Module build failed: TypeError: Cannot read property 'watchRun' of undefined

Packages used:

"webpack": "^2.2.1"
"awesome-typescript-loader": "^5.0.0-1", 
"typescript": "^2.7.2",
"@types/react": "^16.0.40",
"@types/react-dom": "^15.5.7",
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",

I looked up online but nowhere I could find resources giving hint on this watchRun issue.

Thanks.

Answer 1

The awesome-typescript-loader 5.x is compatible with webpack 4.x, your webpack version is too old. Try upgrading your webpack to 4.x or downgrading your awesome-typescript-loader version.