web-dev-qa-db-fra.com

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

Je me débats avec la suivante "Erreur" dans VSCode:

Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'

Par conséquent, réact-scripts (Create-React-App) définit automatiquement la clé jsx sur react-jsx valeur, lorsque la valeur react semble fonctionner.

En fait, le code fonctionne parfaitement et affiche la page que je veux, mais le IDE souligne un peu tout comme des erreurs, en disant:

Cannot use JSX unless the '--jsx' flag is provided.

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

, et mon paquet.json (par défaut fourni par Create-React-App + Packages mis à jour):

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

J'utilise la dernière version de TypeScript et j'ai mis à jour tous mes packages avec ncu, vscode fermé/ouvert (fonctionne parfois avec TSCONFIG!) Et rien ne semble résoudre cela.

Je suis à peu près sûr que c'est un problème de VSCODE, mais je manque d'idées sur la façon de résoudre cela.

L'un de vous gars a eu des idées?

typescriptvisual-studio-codejsxcreate-react-apptsconfig
54
Denis Lebon

Mettez à jour votre tsconfig.json fichier:

"compilerOptions": {
    ...
    "jsx": "react"
 },
0
Fatema T. Zuhora

Pour ceux qui utilisent vs 2019, je devais installer TypeScript 4.1 pour Visual Studio à partir d'ici: https://marketplace.visualstudio.com/items?itemne=typescriptteam.typescript-41

Ensuite, cela a bien fonctionné en utilisant le nouveau paramètre JSX dans les compiléroptions, etc.

0
Ilias.P