0
517
VistasProblema con Visual Studio Code usando "react-jsx" como valor jsx con create-react-app
Estoy luchando con el siguiente "error" en VSCode:
Argument for '--jsx' option must be: 'preserve', 'react-native', 'react' Por lo tanto, react-scripts (create-react-app) establece automáticamente la clave jsx en el valor de react-jsx , cuando el valor de react parece funcionar.
En realidad, el código funciona perfectamente y muestra la página que quiero, pero el IDE subraya todo como errores, diciendo:
Cannot use JSX unless the '--jsx' flag is provided.Aquí está mi tsconfig.json:
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] }y mi paquete.json (el predeterminado proporcionado por create-react-app + paquetes actualizados):
{ "name": "front-office", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.2.2", "@types/jest": "^26.0.15", "@types/node": "^14.14.9", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "bootstrap": "^4.5.3", "react": "^17.0.1", "react-bootstrap": "^1.4.0", "react-dom": "^17.0.1", "react-scripts": "4.0.1", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } Estoy usando la última versión de Typescript, y actualicé todos mis paquetes con ncu , cerré/abrí VSCode (¡a veces funciona con tsconfig!) y nada parece resolver eso.
Estoy bastante seguro de que es un problema de VSCode, pero me estoy quedando sin ideas sobre cómo resolverlo.
¿Alguno de ustedes tiene ideas?
Editar:
Si siguió los pasos anteriores y VSCode aún muestra el error " -jsx ", asegúrese de haber deshabilitado la extensión 'TypeScript God' (y cualquier otra extensión TS hasta que el problema desaparezca).
8 Respuestas
Responde la pregunta0
solo reemplaza
"jsx": "react-jsx"para
"jsx": "react"Salud !!
0
Si está utilizando VS Code y la respuesta de marksfrancis no funcionó para usted. Tal vez debería verificar sus extensiones para TypeScript, en mi caso, la extensión 'TypeScript God' fue la causa por la que todavía tenía este problema.
0
Instalar JavaScript y la extensión Nightly de TypeScript y volver a seleccionar la versión TS en VSC (cuando se abre .tsx, haga clic en la versión TS (abajo a la derecha), luego "Seleccione la versión de TypeScript" -> "Usar la versión de VS Code") también funciona.
(fuente: https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-typescript-nightly-builds )
0
Esto se debe a que la versión de Typescript de VSCode no utiliza las funciones de babel más recientes que create-react-app utiliza de forma predeterminada.
Puede cambiar VS Code para usar la versión de Typescript del espacio de trabajo en su lugar , lo que solucionará este problema.
Abra un archivo TypeScript o JavaScript y haga clic en el número de versión de TypeScript en la barra de estado. Aparecerá un cuadro de mensaje que le preguntará qué versión de TypeScript VS Code debe usar
Seleccione "Usar la versión del espacio de trabajo" para usar la versión más nueva de Create React App typescript.
0
Para los que usan VS 2019, tuve que instalar TypeScript 4.1 para Visual Studio desde aquí: https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.TypeScript-41
Luego funcionó bien usando la nueva configuración jsx en las opciones de compilación, etc.
0
En PhpStorm (y lo mismo es probablemente cierto para WebStorm) obtuve que no me quejara de "react-jsx" como el valor al marcar "Descargar siempre la versión más reciente de los esquemas" en Esquemas JSON remotos.
0
Si intentó actualizar la versión de mecanografiado seleccionando "Usar versión de espacio de trabajo" en su editor de vscode y aún muestra el error, intente actualizar el valor del campo "jsx" en su archivo .tsconfig para "preserve" .
- Esto le permitirá escribir JSX a la antigua usanza.
import React from 'react'; function App() { return <h1>Hello World</h1>; }- Si usa el valor
"react-jsx", deberá escribir reaccionar en la nueva transformación React 17:
import { jsx as _jsx } from "react/jsx-runtime"; export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);Referencia del archivo .tsconfig (según documentos mecanografiados): aquí
nueva transformación JSX (por documentos de reacción): aquí
0
Como lo mencionaron otros, este es un problema abierto con el script create-react-app (CRA). Sin embargo, ninguna de las soluciones mencionadas anteriormente funcionó para mí. La única solución que funciona para mí es agregar la siguiente configuración en el archivo .env (en la raíz del proyecto).
DISABLE_NEW_JSX_TRANSFORM=true