Como ativar o encadeamento opcional com o Create React App e o TypeScript

14

O suporte para a sintaxe experimental 'optionalChaining' não está ativado no momento

Eu estava recebendo o erro acima. Eu segui este post e adicionei "@babel/plugin-proposal-optional-chaining": "^7.7.4"ao meu devDependencies.

Então estou recebendo esse erro,

Adicione @ babel / plugin-proposta-opcional-encadeamento ( https://git.io/vb4Sk ) à seção 'plugins' da sua configuração do Babel para permitir a transformação.

Então eu segui este post e adicionei o .babelrcarquivo na raiz do meu projeto

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

Isso não pareceu fazer nada. Também ouvi alguém mencionando que Create React Appnão permite modificar as configurações de babel. Portanto, minha pergunta é como posso ativar o encadeamento opcional sem religar o todo CRA?

PS estou usando "typescript": "^3.7.2", ou pelo menos é o que package.jsondiz. Eu tentei npm installgarantir que ele seja atualizado. Não tenho certeza se CRAestou fazendo algo estranho por baixo e usando a versão mais antiga de TypeScriptalguma forma.

Edição: Quando eu comecei o projeto CRA, acredito que estávamos usando TypeScript: 3.6.x. Eu queria usar Optional Chaining, então mudei meu package.jsonarquivo para "typescript": "^3.7.2"então npm install. Acho que o problema é, TypeScriptsabe que estou usando 3.7.2, mas CRAainda tenho uma configuração mais antiga e não tenho certeza de como posso atualizá-la.

typescript babel create-react-app

— Hafiz Temuri
fonte

Você pode usar o texto datilografado 3.7 . O encadeamento opcional agora é uma função suportada nativamente.

— Nicolas

Estou usando o TypeScript ^3.7.2. Ou pelo menos é o que package.jsondiz. Eu npm installtambém tentei .

— Hafiz Temuri

15

O Create-React-App usa o babel para transpilar o TypeScript, para que ele não esteja usando a versão instalada do TypeScript npm. A versão 3.3.0 dos react-scripts suporta o TypeScript 3.7. Você pode instalá-lo e usá-lo com:

yarn add react-scripts@3.3.0

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

— LukeP
fonte

obrigado, solução certa aqui.

— Ramon Gonzalez

11

Você pode usar o encadeamento opcional react-scripts 3.3.0sem usar o TS?

— Badrush 24/01

Não - encadeamento opcional é um recurso TypeScript que precisa ser transpilado para JavaScript para funcionar em navegadores ou NodeJS.

— LukeP 24/01

O encadeamento opcional do @Badrush é o recurso TS, como você pode usá-lo sem o TS? É como eu dizendo, posso apenas comer a gema sem quebrar o ovo. A resposta simples é NÃO! Mas vamos torcer para que eles o adicionem ao baunilha JS em breve.

— Hafiz Temuri 26/03

6

O React scripts 3.3.0 e superior são compatíveis. Não há necessidade de instalar o react-scripts @ next.

Basta colocar no package.json "react-scripts": "^3.3.0"e ele funcionará.

— Elisha Sterngold
fonte

11

Bem, não trabalho mais com a empresa para a qual estava fazendo a configuração de aplicativos de reação. Então, eu realmente não posso testar isso facilmente. Mas é bom saber. Isso pode ser útil para os futuros leitores.

— Hafiz Temuri 06/01

Agora que eu olhei para trás, é a mesma coisa que @LukeP sugeriu lol

— Hafiz Temuri

@HafizTemuri luke atualizou sua resposta. Sua resposta estava no começo com

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

postagem detalhada do blog

— Medet Tleukabiluly
fonte

Eu mencionei que no OP, não quero religar a coisa toda. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"

— Hafiz Temuri

Como uso customize-crase já estou usando-o para substituir a configuração? Por exemplo:

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

— Subhendu Kundu