Comment activer le chaînage facultatif avec Create React App et TypeScript

14

La prise en charge de la syntaxe expérimentale «optionalChaining» n'est pas actuellement activée

J'obtenais l'erreur ci-dessus. J'ai suivi ce post et ajouté "@babel/plugin-proposal-optional-chaining": "^7.7.4"à mon devDependencies.

Ensuite, je reçois cette erreur,

Ajoutez @ babel / plugin-proposition-optional-chaining ( https://git.io/vb4Sk ) à la section 'plugins' de votre configuration Babel pour activer la transformation.

J'ai donc suivi ce post et ajouté un .babelrcfichier à la racine de mon projet

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

Cela ne semblait rien faire. J'ai également entendu quelqu'un mentionner que Create React Appcela ne vous permet pas de modifier les configurations de babel. Ma question est donc de savoir comment puis-je activer le chaînage en option sans recâbler l'ensemble CRA?

PS J'utilise "typescript": "^3.7.2", ou du moins c'est ce que package.jsondit mon . J'ai essayé npm installde m'assurer qu'il était mis à jour. Je ne sais pas si vous CRAfaites quelque chose de bizarre en dessous et utilisez une ancienne version de TypeScriptquelque façon.

EDIT: Quand j'ai commencé le projet avec CRA, je crois que nous utilisions TypeScript: 3.6.x. Je voulais l'utiliser Optional Chaining, j'ai donc changé mon package.jsonfichier à ce moment- "typescript": "^3.7.2"là npm install. Je pense que le problème est, TypeScriptsait que j'utilise 3.7.2, mais a CRAtoujours une configuration plus ancienne et je ne sais pas comment je peux mettre à jour cela.

typescript babel create-react-app Hafiz Temuri
la source
Vous pouvez utiliser tapuscript 3.7 . Le chaînage facultatif est désormais une fonction prise en charge en mode natif.
Nicolas
J'utilise TypeScript ^3.7.2. Ou du moins c'est ce que mon package.jsondit. J'ai essayé npm installaussi.
Hafiz Temuri

Réponses:

15

Create-React-App utilise babel pour transpiler le TypeScript afin qu'il n'utilise pas votre version npm installée de TypeScript. La version 3.3.0 de react-scripts prend en charge TypeScript 3.7. Vous pouvez l'installer et l'utiliser avec:

LukeP
la source
merci, bonne solution ici.
Ramon Gonzalez
1
Pouvez-vous utiliser le chaînage optionnel react-scripts 3.3.0sans utiliser TS?
Badrush
Non - le chaînage facultatif est une fonctionnalité TypeScript qui doit être transposée en JavaScript pour fonctionner dans les navigateurs ou NodeJS.
LukeP
@Badrush Chaining en option est une fonction TS, comment pouvez-vous l'utiliser sans TS? C'est comme si je disais, puis-je simplement manger le jaune sans casser l'oeuf. La réponse simple est non! Mais espérons qu'ils l'ajouteront bientôt à la vanille JS.
Hafiz Temuri
6

React scripts 3.3.0 et supérieur le supporte. Il n'est pas nécessaire d'installer les react-scripts @ next.

Mettez simplement le package.json "react-scripts": "^3.3.0"et cela fonctionnera.

Elisha Sterngold
la source
1
Eh bien, je ne travaille plus avec l'entreprise pour laquelle je faisais la configuration de l'application React. Je ne peux donc pas vraiment tester cela facilement. Mais bon à savoir. Cela pourrait être utile aux futurs lecteurs.
Hafiz Temuri
Maintenant que j'ai regardé en arrière, c'est la même chose que @LukeP a suggéré lol
Hafiz Temuri
@HafizTemuri luke a mis à jour sa réponse. Sa réponse a été au début avec react-scripts @ 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"]
}

blogpost détaillé

Medet Tleukabiluly
la source
J'ai mentionné que dans OP, je ne veux pas re-câbler le tout. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"
Hafiz Temuri
Comment puis-je l'utiliser customize-crasi je l'utilise déjà pour remplacer la configuration? Par exemple:module.exports = function override(config) { config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']; return config; };
Subhendu Kundu