Webpack cant compile ts 3.7 (Optional Chaining, Nullish Coalescing)

Question

I try to use typescript 3.7 features like Optional Chaining, Nullish Coalescing. But webpack gives me an error while transpaling.

app: Module parse failed: Unexpected token (50:40)
app: File was processed with these loaders:
app:  * ../../../node_modules/ts-loader/index.js
app: You may need an additional loader to handle the result of these loaders.
app: | export const Layout = (props) => {
app: |     const regionsResults = useQuery(regionsQuery, { fetchPolicy: 'cache-first' });
app: >     const regions = regionsResults.data?.regions ?? [];
app: |     const userItem = useQuery(usersProfileQuery, { fetchPolicy: 'cache-first' });
app: |     const handleOnClick = (selected) => props.history.push(selected.key);
``

can you post your `packages.json` file? – Carlos Crespo Nov 12 '19 at 17:51 — Carlos Crespo, Nov 12 '19 at 17:51

score 73 · Accepted Answer · edited Aug 09 '20 at 09:44

73

I changed target: esnext to es2018 in tsconfig.json file. Now it works.

Webpack issue for reference : https://github.com/webpack/webpack/issues/10227

edited Aug 09 '20 at 09:44

bmtheo

974
1
7
16

answered Nov 13 '19 at 12:02

Edgaras Karka

7,400
15
61
115

27

This did not work for me. Webpack still fails with the same error. – Alejandro Corredor Feb 10 '20 at 18:13
Does not work if you are using `"foo".matchAll(/o+/g)` cause it's a ES2020 feature. – Jason Schilling Mar 18 '20 at 13:29
2

This is ridiculous, but it really works! I even can't figure out how... Optional channing brought to us only since ES2020. ES2018 & ES2019 are both works properly, btw ES2020 is still crashing. – Max Travis Apr 14 '20 at 04:55
So is the issue that Webpack cannot parse ES2020 code? That sucks. – Timmmm May 27 '20 at 18:42
@Timmmm Not webpack but acorn apparently (see the GitHub issue above) which is confusing because the code runs on Node, and optional chaining is already supported in Node 14. – Alex Oct 15 '20 at 18:09
1

In tsconfig.json I added "target: "ES2019" " where there was no target attribute. This did the trick. – jrsmolley Aug 12 '21 at 21:09
I thought esnext always targets the latest? Guess not – Miguel Stevens Nov 18 '21 at 19:18

aryzing · Answer 2 · 2020-05-09T11:28:38.293

34

Depending on which loader you're using to transiple the code, there are several options available

For ts-loader, you need to make sure the output from typescript is understandable by Webpack. This can be achieved by setting target to ES2018 in tsconfig.json.

For babel-loader, you'll need to make sure babel loads the

@babel/plugin-proposal-nullish-coalescing-operator
@babel/plugin-proposal-optional-chaining

plugins. Note that if you're using preset-env, it may or may not load these plugins depending on your targets or browserlist (ie, won't be loaded if the target env has support for these language features), in which case the only way to guarantee their inclusion is by manually specifying them in the plugins array in babel.config.js,

  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
  ],

edited May 09 '20 at 11:28

answered Apr 16 '20 at 19:36

aryzing

4,982
7
39
42

Is there a reference that says which versions of ECMAScript Webpack can parse? I.e. where does it say Webpack can parse ES2018 but not ES2020? – Timmmm Jan 11 '21 at 13:34
3

Webpack uses [acorn](https://github.com/acornjs/acorn) as its parser ([package.json](https://github.com/webpack/webpack/blob/a694cdfb82b5fd0a5c52102083a267a36446e03e/package.json#L13)), which determines the language features that are understood – aryzing Jan 12 '21 at 07:55
I'm using babel-loader. And I correctly put the 2 plugins in the file because these syntax are working for my own files. But for node_modules files it's failing. – addlistener Sep 05 '22 at 15:31

score 0 · Answer 3 · answered Jun 26 '23 at 13:47

I had the same issue in an old Vue.js 2 web app.

I had to do the following:

npm install --save-dev @babel/plugin-transform-nullish-coalescing-operator
npm install --save-dev @babel/plugin-transform-optional-chaining

And modify my babel.config.js:

module.exports = {
    presets: ["@vue/app"],
    plugins: ["@babel/plugin-transform-nullish-coalescing-operator", "@babel/plugin-transform-optional-chaining"],
};

See:

score -5 · Answer 4 · answered Nov 21 '19 at 09:04

-5

If you're using vs code, probably you should change the local typescript version vs code use.

What TypeScript version is Visual Studio Code using? How to update it?

answered Nov 21 '19 at 09:04

Alex Hyriavets

11
2

Webpack cant compile ts 3.7 (Optional Chaining, Nullish Coalescing)

4 Answers4

Linked