Create React AppとTypeScriptを使用してオプションのチェーンを有効にする方法

実験的な構文 'optionalChaining'のサポートは現在有効になっていません

上記のエラーが発生しました。この投稿をフォロー"@babel/plugin-proposal-optional-chaining": "^7.7.4"してに追加しましたdevDependencies。

次に、このエラーが発生します、

@ babel / plugin-proposal-optional-chaining（https://git.io/vb4Sk）をBabel設定の 'plugins'セクションに追加して、変換を有効にします。

だから私はこの投稿をフォロー.babelrcし、プロジェクトのルートにファイルを追加しました

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

これは何もしなかったようです。また、誰かがCreate React Appバベルの設定を変更できないと言っている人もいました。だから私の質問は、全体を再配線せずにオプションのチェーンを有効にするにはどうすればよいCRAですか？

PS私が使用している"typescript": "^3.7.2"、または少なくともそれが私のpackage.json言うことです。私はnpm installそれが更新されていることを確認しようとしました。CRA下で奇妙なことをして、TypeScriptどういうわけか古いバージョンを使用しているかどうかわからない。

編集：で プロジェクトを開始したときCRA、私たちはを使用していたと思いますTypeScript: 3.6.x。使いたかったOptional Chainingので、package.jsonファイルを"typescript": "^3.7.2"当時の状態に変更しましたnpm install。問題は、TypeScript私がを使用していることを知っていると思います3.7.2が、CRAそれでも古い設定があり、それをどのように更新できるかわかりません。

Create-React-Appは、babelを使用してTypeScriptをトランスパイルするため、npmがインストールされているバージョンのTypeScriptを使用しません。react-scriptsのバージョン3.3.0はTypeScript 3.7をサポートしています。あなたはそれをインストールして、それを以下で使うことができます：

• yarn add react-scripts@3.3.0

  -または-

• npm install -s react-scripts@3.3.0

Reactスクリプト3.3.0以降でサポートされています。react-scripts @ nextをインストールする必要はありません。

package.jsonに入れるだけで"react-scripts": "^3.3.0"動作します。

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"]
}

詳細なブログ投稿