Jak włączyć opcjonalne tworzenie łańcuchów za pomocą aplikacji Create React i TypeScript

14

Obsługa eksperymentalnej składni „opcjonalny łańcuch” nie jest obecnie włączona

Otrzymałem powyższy błąd. Śledziłem ten post i dodałem "@babel/plugin-proposal-optional-chaining": "^7.7.4"do swojego devDependencies.

Wtedy pojawia się ten błąd,

Dodaj @ babel / plugin-wniosek-opcjonalny-łańcuchowy ( https://git.io/vb4Sk ) do sekcji „plugins” konfiguracji Babel, aby umożliwić transformację.

Więc śledziłem ten post i dodałem .babelrcplik do katalogu głównego mojego projektu

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

Wydawało się, że to nic nie robi. Słyszałem też, że ktoś wspomniał, że Create React Appnie pozwala ci modyfikować konfiguracji Babel. Więc moje pytanie brzmi: jak mogę włączyć opcjonalne łączenie łańcuchów bez ponownego okablowania całości CRA?

PS Używam "typescript": "^3.7.2", a przynajmniej tak package.jsonmówią. Próbowałem npm installupewnić się, że jest aktualizowany. Nie jestem pewien, czy CRArobisz coś dziwnego i używasz w TypeScriptjakiś sposób starszej wersji .

EDYCJA: Kiedy zaczynałem projekt CRA, wydaje mi się, że używaliśmy TypeScript: 3.6.x. Chciałem użyć Optional Chaining, więc zmieniłem package.jsonplik "typescript": "^3.7.2"potem npm install. Myślę, że problem polega na tym, TypeScriptże wie, że używam 3.7.2, ale CRAnadal mam starszą konfigurację i nie jestem pewien, jak mogę to zaktualizować.

typescript babel create-react-app Hafiz Temuri
źródło
Możesz użyć maszynopisu 3.7 . Opcjonalne tworzenie łańcuchów jest teraz natywnie obsługiwaną funkcją.
Nicolas
Używam TypeScript ^3.7.2. A przynajmniej tak mi package.jsonmówi. Też próbowałem npm install.
Hafiz Temuri

Odpowiedzi:

15

Aplikacja Create-React używa babel do transponowania TypeScript, więc nie używa zainstalowanej wersji npm TypeScript. Wersja 3.3.0 skryptów reagujących obsługuje TypeScript 3.7. Możesz go zainstalować i używać z:

LukeP
źródło
dzięki, właściwe rozwiązanie tutaj.
Ramon Gonzalez,
1
Czy możesz używać opcjonalnego łączenia react-scripts 3.3.0bez użycia TS?
Badrush
Nie - opcjonalne tworzenie łańcuchów to funkcja TypeScript, która musi zostać przełożona na JavaScript, aby działała w przeglądarkach lub NodeJS.
Łukasz
@Badrush Opcjonalne tworzenie łańcuchów jest funkcją TS, jak można jej używać bez TS? Tak jak mówię, czy mogę po prostu zjeść żółtko bez rozbijania jajka. Prostą odpowiedzią jest: nie! Ale miejmy nadzieję, że wkrótce dodadzą go do waniliowej JS.
Hafiz Temuri
6

Skrypty React 3.3.0 i nowsze obsługują to. Nie ma potrzeby instalowania skryptów reagujących @ dalej.

Wystarczy włożyć plik package.json "react-scripts": "^3.3.0"i będzie działać.

Elisha Sterngold
źródło
1
Cóż, nie współpracuję już z firmą, dla której wykonuję konfigurację aplikacji. Tak naprawdę nie mogę tego łatwo przetestować. Ale dobrze wiedzieć. Może to być pomocne dla przyszłych czytelników.
Hafiz Temuri
Teraz, gdy spojrzałem wstecz, to samo, co @LukeP sugeruje lol
Hafiz Temuri
@HafizTemuri luke zaktualizował swoją odpowiedź. Jego odpowiedź była na początku od skryptów reagujących @ next
Elisha Sterngold
2

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

szczegółowy post na blogu

Medet Tleukabiluly
źródło
Wspomniałem, że w OP nie chcę ponownie wszystko podłączać. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"
Hafiz Temuri,
Jak używać, customize-crajeśli już go używam do zastąpienia konfiguracji? Np .:module.exports = function override(config) { config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']; return config; };
Subhendu Kundu,