So aktivieren Sie die optionale Verkettung mit Create React App und TypeScript

14

Die Unterstützung für die experimentelle Syntax 'optionalChaining' ist derzeit nicht aktiviert

Ich habe den obigen Fehler erhalten. Ich folgte diesem Post und fügte "@babel/plugin-proposal-optional-chaining": "^7.7.4"in meine devDependencies.

Dann bekomme ich diesen Fehler,

Fügen Sie @ babel / plugin-comment-optional-chaining ( https://git.io/vb4Sk ) zum Abschnitt 'plugins' Ihrer Babel-Konfiguration hinzu, um die Transformation zu aktivieren.

Also folgte ich diesem Beitrag und fügte eine .babelrcDatei in das Stammverzeichnis meines Projekts ein

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

Dies schien nichts zu bewirken. Ich hörte auch jemanden erwähnen, der Create React Appes Ihnen nicht erlaubt, die Konfigurationen von babel zu ändern. Meine Frage ist also, wie ich die optionale Verkettung aktivieren kann, ohne das Ganze neu zu verkabelnCRA .

PS Ich benutze "typescript": "^3.7.2", oder zumindest ist es das, was ich package.jsonsage. Ich habe versucht npm installsicherzustellen, dass es aktualisiert wird. Ich bin mir nicht sicher, ob CRAich etwas Seltsames darunter mache und TypeScriptirgendwie eine ältere Version von benutze .

EDIT: Als ich das Projekt mit startete CRA, glaube ich, dass wir verwendet haben TypeScript: 3.6.x. Ich wollte verwenden Optional Chaining, also habe ich meine package.jsonDatei auf "typescript": "^3.7.2"dann geändert npm install. Ich denke, das Problem ist, TypeScriptweiß, dass ich verwende 3.7.2, aber CRAnoch ältere Konfiguration habe und ich bin nicht sicher, wie ich das aktualisieren kann.

typescript babel create-react-app

— Hafiz Temuri
quelle

Sie könnten Typoskript 3.7 verwenden . Die optionale Verkettung wird jetzt von Haus aus unterstützt.

— Nicolas

Ich benutze TypeScript ^3.7.2. Zumindest ist es das, was ich package.jsonsage. Ich habe es auch versucht npm install.

— Hafiz Temuri

15

Create-React-App verwendet babel, um das TypeScript zu transpilieren, sodass es nicht Ihre von npm installierte Version von TypeScript verwendet. Version 3.3.0 von React-Scripts unterstützt TypeScript 3.7. Sie können es installieren und verwenden mit:

yarn add react-scripts@3.3.0

-oder-
npm install -s react-scripts@3.3.0

— LukeP
quelle

Danke, richtige Lösung hier.

— Ramon Gonzalez

1

Können Sie die optionale Verkettung react-scripts 3.3.0ohne TS verwenden?

— Badrush

Nein - Optionale Verkettung ist eine TypeScript-Funktion, die in JavaScript transpiliert werden muss, damit sie in Browsern oder NodeJS funktioniert.

— LukeP

@Badrush Optionale Verkettung ist eine TS-Funktion. Wie können Sie sie ohne TS verwenden? Wie ich schon sagte, kann ich nur das Eigelb essen, ohne das Ei zu zerbrechen? Die einfache Antwort lautet NEIN! Aber hoffen wir, dass sie es bald zu Vanilla JS hinzufügen.

— Hafiz Temuri

6

React Scripts 3.3.0 und höher unterstützen dies. Es ist nicht erforderlich, die React-Scripts @ next zu installieren.

Geben "react-scripts": "^3.3.0"Sie einfach die package.json ein und es wird funktionieren.

— Elisha Sterngold
quelle

1

Nun, ich arbeite nicht mehr mit der Firma zusammen, für die ich die App-Reaktionskonfiguration durchgeführt habe. Also kann ich das nicht so einfach testen. Aber gut zu wissen. Dies könnte für zukünftige Leser hilfreich sein.

— Hafiz Temuri

Jetzt, wo ich zurückblickte, ist es dasselbe, wie @LukeP vorgeschlagen hat lol

— Hafiz Temuri

@HafizTemuri luke hat seine Antwort aktualisiert. Seine Antwort war am Anfang mit

— React

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

detaillierter Blogpost

— Medet Tleukabiluly
quelle

Ich erwähnte, dass ich in OP das Ganze nicht neu verkabeln möchte. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"

— Hafiz Temuri

Wie verwende ich, customize-crawenn ich es bereits zum Überschreiben der Konfiguration verwende? ZB:

module.exports = function override(config) {   config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules'];   return config; };

— Subhendu Kundu