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);
``

Mccarver

can you post your packages.json file? – Only

Answer 1

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

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

Mccarver

This did not work for me. Webpack still fails with the same error. – Potomac

Does not work if you are using "foo".matchAll(/o+/g) cause it's a ES2020 feature. – Ida

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. – Commonage

So is the issue that Webpack cannot parse ES2020 code? That sucks. – Disenfranchise

@Disenfranchise 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. – Doublequick

In tsconfig.json I added "target: "ES2019" " where there was no target attribute. This did the trick. – Keyway

I thought esnext always targets the latest? Guess not – Ligurian

Answer 2

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',
  ],

Deliadelian

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? – Disenfranchise

Webpack uses acorn as its parser (package.json), which determines the language features that are understood – Deliadelian

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. – Feucht

Answer 3

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:

• https://babeljs.io/docs/babel-plugin-transform-nullish-coalescing-operator#installation
• https://babeljs.io/docs/babel-plugin-transform-optional-chaining#installation

Detoxify

Answer 4

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?

Gapeworm