81
votes

Problème avec le code Visual Studio en utilisant "React-JSX" comme valeur JSX avec Create-React-App

Je suis aux prises avec le suivant "Erreur" dans VScode:

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


0 commentaires

9 Réponses :




29
votes

Dans PHPSTorm (et il en va de même pour WebStorm), je ne me plaignais pas de "React-JSX" car la valeur en cochant "Téléchargez toujours la version la plus récente de schémas" dans des schémas JSON distants.

 L'option qui doit être cochée


3 commentaires

Je crois que la question était concernant VScode ...


Certes, puisque j'ai moi-même trouvé ce problème à la recherche de phpstorm, je pensais que cela pourrait peut-être aider les autres aussi. Cela pourrait également aider à être un indice concernant le VSCOD que le problème aura quelque chose à voir avec les schémas JSON probablement vieux.


Cela m'a aidé car j'utilise WebStorm. Merci!



0
votes

Si vous utilisez VS Code et que la réponse de Marksfrancis n'a pas fonctionné pour vous. Vous devriez peut-être vérifier vos extensions pour TypeScript, dans mon cas, l'extension «TypeScript God» était la cause que j'avais encore ce problème.


0 commentaires

0
votes

Installation javascript et expul l'extension nocturne et La version TS reélectionnée dans VSC (lorsque .TSX est ouvert, cliquez sur la version TS (en bas à droite), puis "Sélectionner la version TypeScript" -> "Utiliser la version du code") fonctionne également.

(src: https: //. VisualStudio.com/docs/typescript/typescript-compiling#_using-typescript-nightly-builds )


0 commentaires

-1
votes

Si vous avez essayé de mettre à jour la version TypeScript en sélectionnant "Utilisez Workspace Version" dans votre éditeur VScode et qu'il affiche toujours l'erreur, essayez de mettre à jour la valeur du champ "JSX" dans votre fichier .tsConfig à "préserver" .

  • Cela vous permettra d'écrire JSX à l'ancienne.
import { jsx as _jsx } from "react/jsx-runtime";
export const helloWorld = () => _jsx("h1", { children: "Hello world" }, void 0);
  • Si vous utilisez la valeur de la valeur "react-jsx" , vous devrez écrire React dans la nouvelle transformation React 17:
import React from 'react';

function App() {
  return <h1>Hello World</h1>;
} 

.tsConfig File Reference (par TypeScript Docs): Ici

Nouvelle transformée JSX (Per React Docs): ici


0 commentaires

5
votes

Comme mentionné par d'autres, il s'agit d'un problème ouvert avec le script Create-React-App (CRA). Cependant, aucune des solutions mentionnées ci-dessus n'a fonctionné pour moi. La seule solution qui fonctionne pour moi est d'ajouter la configuration ci-dessous dans le fichier .env (dans le projet root).

DISABLE_NEW_JSX_TRANSFORM=true


0 commentaires

0
votes

Remplacez simplement

"jsx": "react"

à

 "jsx": "react-jsx"

Cheers !!


1 commentaires

L'affiche d'origine a déjà mentionné qu'ils savent que "JSX": "React" fonctionne, donc cette réponse n'aide pas du tout. De plus, même si vous remplacez manuellement le "react-jsx" par "react" , les scripts de l'ARC le changeront automatiquement en "react-jsx" < / Code> Chaque fois que vous exécutez le code.



-1
votes

J'ai changé le code Visual Studio en une version plus récente qui a résolu le problème à ma fin.


0 commentaires