Getting Typescript 3.7 To Work With Webpack and ts-loader
At the time of writing this post, TypeScript 3.7 is in beta. Eventually, this post will become irrelevant. But, for the moment if you are trying to get TypeScript 3.7 Beta or any of the RC builds working with Webpack and ts-loader you might have encountered a bunch of red text in your console.
In my case, I had target: "esnext" set in my tsconfig.json file which the ts-loader plugin should read and set the appropriate settings. And yet, TypeScript 3.7 Beta was not working despite making sure everything was up to date.
It turns out at present, ts-loader does not seem to work with esnext as the target value (hopefully, this changes when TypeScript 3.7 is released). To get things working, all you need to do is change your target value in tsconfig.json to es2018 like this: "target": "es2018"
In my case, that fixed the issue and I could use the exciting new features TypeScript has to offer such as Nullish Coalescing and Optional Chaining. Happy days.
Thank you very much!
I’m stuck with this.
Hi, thank you for your help.
It turns out the problem is that there is a proposal in esnext to introduce the optional chaining operator, among others:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
This means that if you use esnext as the target, the typescript compiler won’t translate the ?. and ?? operators into verbose ternary operators. This is completely fine and expected, however webpack doesn’t understand them yet, and it think it is not a valid javascript module.
I do not know how to configure Babel, but you may have luck with babel-loader and this babel plugin:
https://babeljs.io/docs/en/next/babel-plugin-syntax-optional-chaining.html