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

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

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