webpack - Typescript 4 nullish-uppdrag (??=) fungerar inte i nytt CRA-projekt

Typescript 4 stöder nullish-assignment (??=). CRA 4 som släpptes igår säger att det stöder TS 4. Den operatorn fungerar i kodredigeraren, men när jag kör yarn start får jag:

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.

För att reproducera problemet skapar jag bara en ny app med CRA med Typescript-stöd. Sedan lägger jag bara till följande rader i App.tsx:

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

Några idéer? Jag vet inte mycket om Babel/Webpack.

Svar #1

Jag gjorde testet och det känns som en bugg/regression i CRA eftersom dessa funktioner har funnits sedan 2019 (nullish coalescing var från TS 3.7 eller något sådant). Samma fel uppstår med vanlig JS (vanlig JS borde också stödja operatorerna). CRA v4 (huvudversionen!) släpptes just igår så detta är ganska sannolikt.

Medan detta åtgärdas kanske du bara håller dig till CRA v3, eftersom att fixa det manuellt kan vara smärtsamt.

Svar #2

Har du tillgång till din webpack.config.js-fil?

Vanligtvis behöver du lägga till en loader (som tslint-loader), en tsconfig-fil och en regel i webpack-konfigurationen för att låta webpack transpila TS-koden till JS.

Om CRA inte låter dig ändra den filen utan att ejecta, måste det finnas ett sätt på vilket du kan uppdatera loadern till de senaste Typescript-specifikationerna

Relaterade artiklar