Cómo habilitar el encadenamiento opcional con la aplicación Create React y TypeScript

14

El soporte para la sintaxis experimental 'optionalChaining' no está habilitado actualmente

Estaba recibiendo el error anterior. Seguí esta publicación y agregué "@babel/plugin-proposal-optional-chaining": "^7.7.4"a mi devDependencies.

Entonces recibo este error,

Agregue @ babel / plugin-offer-optional-chaining ( https://git.io/vb4Sk ) a la sección 'plugins' de su configuración de Babel para permitir la transformación.

Así que seguí esta publicación y agregué el .babelrcarchivo a la raíz de mi proyecto

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

Esto no parecía hacer nada. También escuché a alguien mencionar que Create React Appno te permite modificar las configuraciones de Babel. Entonces, mi pregunta es ¿cómo puedo habilitar el encadenamiento opcional sin volver a cablear todo CRA?

PD : estoy usando "typescript": "^3.7.2", o al menos eso es lo que package.jsondice. Traté npm installde asegurarme de que esté actualizado. No estoy seguro si CRAhacer algo extraño debajo y usar una versión anterior de TypeScriptalguna manera.

EDITAR: Cuando comencé el proyecto con CRA, creo que estábamos usando TypeScript: 3.6.x. Quería usar Optional Chaining, así que cambié mi package.jsonarchivo a "typescript": "^3.7.2"entonces npm install. Creo que el problema es, TypeScriptsabe que estoy usando 3.7.2, pero CRAtodavía tengo una configuración anterior y no estoy seguro de cómo puedo actualizar eso.

typescript babel create-react-app

— Hafiz Temuri
fuente

Puede usar el mecanografiado 3.7 . El encadenamiento opcional ahora es una función compatible de forma nativa.

— Nicolas

Estoy usando TypeScript ^3.7.2. O al menos eso es lo que package.jsondice mi . Yo también lo he intentado npm install.

— Hafiz Temuri

15

Create-React-App usa babel para transpilar el TypeScript para que no use su versión npm instalada de TypeScript. La versión 3.3.0 de react-scripts admite TypeScript 3.7. Puede instalarlo y usarlo con:

yarn add react-scripts@3.3.0

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

— LukeP
fuente

gracias, la solución correcta aquí.

— Ramon Gonzalez

1

¿Se puede usar el encadenamiento opcional react-scripts 3.3.0sin usar TS?

— Badrush

No: el encadenamiento opcional es una característica de TypeScript que debe transpilarse a JavaScript para funcionar en navegadores o NodeJS.

— LukeP

@Badrush Opcional Chaining es la función TS, ¿cómo se puede usar sin TS? Es como yo diciendo, ¿puedo comer la yema sin romper el huevo? ¡La respuesta simple es no! Pero esperemos que lo agreguen a Vanilla JS pronto.

— Hafiz Temuri

6

React scripts 3.3.0 y superior lo admite. No es necesario instalar react-scripts @ next.

Simplemente ponga el paquete.json "react-scripts": "^3.3.0"y funcionará.

— Elisha Sterngold
fuente

1

Bueno, ya no trabajo con la compañía para la que estaba haciendo la configuración de la aplicación Reaction Así que realmente no puedo probar esto fácilmente. Pero es bueno saberlo. Esto podría ser útil para los futuros lectores.

— Hafiz Temuri

Ahora que miré hacia atrás, es lo mismo que @LukeP sugirió jajaja

— Hafiz Temuri

@HafizTemuri luke actualizó su respuesta. Su respuesta fue al principio con react-scripts @ next

— Elisha Sterngold

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

publicación de blog detallada

— Medet Tleukabiluly
fuente

Mencioné que en OP, no quiero volver a cablear todo. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"

— Hafiz Temuri

¿Cómo lo uso customize-crasi ya lo estoy usando para anular la configuración? Por ejemplo:

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

— Subhendu Kundu