Come abilitare il concatenamento opzionale con Crea React App e TypeScript


14

Il supporto per la sintassi sperimentale 'optionalChaining' non è attualmente abilitato

Stavo ottenendo l'errore sopra. Ho seguito questo post e aggiunto "@babel/plugin-proposal-optional-chaining": "^7.7.4"al miodevDependencies .

Quindi ricevo questo errore,

Aggiungi @ babel / plugin-proposta-optional-chaining ( https://git.io/vb4Sk ) alla sezione "plug-in" della configurazione di Babel per abilitare la trasformazione.

Quindi ho seguito questo post e ho aggiunto il .babelrcfile nella radice del mio progetto

{
    "presets": ["react", "es2015","stage-1"],
    "plugins": ["transform-runtime", "transform-optional-chaining"]
}

Questo non sembra fare nulla. Ho anche sentito qualcuno menzionare che Create React Appnon ti consente di modificare le configurazioni di Babel. Quindi la mia domanda è: come posso abilitare il concatenamento opzionale senza ricablare il tutto CRA?

PS sto usando "typescript": "^3.7.2", o almeno questo è quello che package.jsondice il mio . Ho cercato npm installdi assicurarmi che sia aggiornato. Non sono sicuro se CRAfare qualcosa di strano sotto e usare la versione precedente di in TypeScriptqualche modo.


EDIT: Quando ho iniziato il progetto con CRA, credo che stessimo usando TypeScript: 3.6.x. Volevo usare Optional Chaining, quindi ho cambiato il mio package.jsonfile in "typescript": "^3.7.2"allora npm install. Penso che il problema sia, TypeScriptsa che sto usando 3.7.2, ma CRAho ancora una configurazione precedente e non sono sicuro di come posso aggiornarlo.


È possibile utilizzare dattiloscritto 3.7 . Il concatenamento opzionale è ora una funzione supportata nativamente.
Nicolas,

Sto usando TypeScript ^3.7.2. O almeno è quello che package.jsondice il mio . Ci ho provato npm installanch'io.
Hafiz Temuri,

Risposte:


15

Create-React-App usa babel per trascrivere TypeScript in modo che non utilizzi la tua versione di TypeScript installata npm. La versione 3.3.0 di reazioni-script supporta TypeScript 3.7. Puoi installarlo e usarlo con:

  • yarn add react-scripts@3.3.0

    -o-

  • npm install -s react-scripts@3.3.0


grazie, giusta soluzione qui.
Ramon Gonzalez il

1
È possibile utilizzare il concatenamento opzionale react-scripts 3.3.0senza utilizzare TS?
Badrush,

No: il concatenamento facoltativo è una funzione TypeScript che deve essere trasferita in JavaScript per funzionare nei browser o NodeJS.
LukeP

@Badrush Il concatenamento opzionale è la funzione TS, come è possibile utilizzarlo senza TS? È come sto dicendo, posso semplicemente mangiare il tuorlo senza rompere l'uovo. La semplice risposta è NO! Ma speriamo che lo aggiungano presto alla vaniglia JS.
Hafiz Temuri,

6

Gli script React 3.3.0 e versioni successive lo supportano. Non è necessario installare reagire-script @ next.

Basta inserire package.json "react-scripts": "^3.3.0"e funzionerà.


1
Bene, non lavoro più con la società per cui stavo reagendo alla configurazione dell'app. Quindi non posso davvero provarlo facilmente. Ma buono a sapersi. Questo potrebbe essere utile per i futuri lettori.
Hafiz Temuri,

Ora che ho guardato indietro, è la stessa cosa di @LukeP suggerito lol
Hafiz Temuri,

@HafizTemuri luke ha aggiornato la sua risposta. La sua risposta era all'inizio con reagenti-script @ next
Elisha Sterngold

2

package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "customize-cra": "^0.4.1",
    "react-app-rewired": "^2.1.3"
  }
  ...other
}

config-overrides.js

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

post di blog dettagliato


Ho detto che in OP non voglio ricollegare l'intera cosa. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"
Hafiz Temuri,

Come posso utilizzarlo customize-crase lo sto già utilizzando per ignorare la configurazione? Ad esempio:module.exports = function override(config) { config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']; return config; };
Subhendu Kundu il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.