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