web-dev-qa-db-fra.com

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

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

J'obtenais l'erreur ci-dessus. J'ai suivi cette post et ajouté "@babel/plugin-proposal-optional-chaining": "^7.7.4" dans 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 ceci post et ajouté .babelrc fichier dans 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 App ne vous permet pas de modifier les configurations de babel. Donc, ma question est de savoir comment puis-je activer le chaînage optionnel sans recâbler l'ensemble CRA?

P.S. J'utilise "TypeScript": "^3.7.2", ou du moins c'est ce que mon package.json dit. J'ai essayé npm install pour vous assurer qu'il est mis à jour. Je ne sais pas si CRA fait quelque chose de bizarre en dessous et utilise une ancienne version de TypeScript d'une manière ou d'une autre.

EDIT: Quand j'ai commencé le projet avec CRA, je pense que nous utilisions TypeScript: 3.6.x. Je voulais utiliser Optional Chaining, j'ai donc changé mon package.json fichier vers "TypeScript": "^3.7.2" puis npm install. Je pense que le problème est, TypeScript sait que j'utilise 3.7.2, mais CRA a toujours une configuration plus ancienne et je ne sais pas comment je peux la mettre à jour.

typescriptbabelcreate-react-app
11
Hafiz Temuri

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:

10
LukeP

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

Il suffit de mettre dans le package.json "react-scripts": "^3.3.0" et cela fonctionnera.

5
Elisha Sterngold

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é

2
Medet Tleukabiluly