Typescript 4 nullish assignment (??=) not working in new CRA project

user_3256171 0
Viewed 2190

Typescript 4 supports nullish assignment (??=). CRA 4 released yesterday says it supports TS 4. That operator works in the code editor, but when running yarn start I get:

Module parse failed: Unexpected token (14:10)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js  
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

To reproduce the problem I just create a new app with CRA with Typescript support. Then just add the following lines to App.tsx:

const test = { a: 1 };
test.a ??= 2;

Any ideas? I don't know much about Babel/Webpack.

create-react-app webpack typescript
2 Answers

I did the test and it feels like a bug/regression in CRA since these features have been around since 2019 (nullish coalescing was from TS 3.7 or sth like that). Same error occurs with plain js (plain js should also support the operators). CRA v4 (the major version!) was just released yesterday so this is quite likely.

While this gets fixed you might just stick with CRA v3, as manually fixing that might be painful.

user_16242600

Do you have accesss to your webpack.config.js file?

Usually you need to add a loader (like tslint-loader), a tsconfig file and a rule in webpack config in order to let webpack transpile the TS code into JS.

If CRA doesn't let you modify that file without ejecting, there must be a way in which you can update the loader to the latest typescript specifications

user_141725780
Related