reactjs - Nie je možné používať JSX, pokiaľ nie je poskytnutý parameter '--jsx'

Trochu som sa poobzeral po riešení tohto problému. Všetky navrhujú pridať "jsx": "react" do vášho súboru tsconfig.json. Čo som aj urobil. Ďalšie riešenie bolo pridať "include: []", čo som tiež urobil. Napriek tomu sa mi stále zobrazuje chyba, keď sa snažím upravovať súbory .tsx. Nižšie je môj súbor tsconfig.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "checkJs": false,
        "jsx": "react",
        "outDir": "./build",
        "rootDir": "./lib",
        "removeComments": true,
        "noEmit": true,
        "pretty": true,
        "skipLibCheck": true,
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./lib/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Akékoľvek návrhy by boli užitočné. Používam Babel 7 na kompilovanie všetkého kódu s prednastaveniami env, react a typescript. Ak budete potrebovať viac súborov na pomoc pri ladení, dajte mi vedieť.

Odpoveď č. 1

Kedykoľvek spustím npm start, prepíše všetko, čo nakonfigurujem v {jsx: ...}, na react-jsx, aby bola zabezpečená kompatibilita s JSX transformom v React 17.

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

Problém je v tom, že VSCode používa staršiu verziu TypeScriptu (4.0.3), zatiaľ čo verzia TypeScriptu dodávaná s projektom je (4.1.2).

Nasledujúce mi pomohlo:

  1. Prejdite do palety príkazov CTRL+Shift+P (alebo ⌘+Shift+P na Macu).
  2. Vyberte „TypeScript: Vybrať verziu TypeScript...“.
  3. Vyberte „Použiť verziu pracovného priestoru“.

PS: Táto možnosť sa však nezobrazí, pokiaľ nie ste v žiadnom súbore .tsx (ďakujem @awran5 za váš komentár a dobré zistenie)

PS 2: musíte reštartovať VSCode, aby sa účinky prejavili po vytvorení súboru tsconfig.json

Odpoveď č. 2

Nie je možné použiť JSX, pokiaľ nie je zadaný parameter '--jsx'

Reštartujte svoje IDE. Niekedy sa zmeny v tsconfig.json nezachytia okamžite.

Odpoveď č. 3

Pre kohokoľvek, kto číta, choďte do tsconfig.json a zmeňte ten riadok z react-jsx na react:

{
  "compilerOptions": {
    "jsx": "react" // or "react-native"
  }
}

bonus: skúste tiež nastaviť verziu TS v IDE na najnovšiu (momentálne 4.2), vo VSCode stlačte CMD + SHIFT + P a zmeňte ju odtiaľ.

Odpoveď č. 4

create-react-app je po vybalení z krabice nefunkčný. OD MÁJA 2022

Vo vnútri tsconfig bolo include nastavené iba na /src, Zmeňte na:

  "include": [
    "./src/**/*.ts"
  ]

Odpoveď č. 5

V mojom prípade bol problém v tom, že VSCode vygenerovalo prázdny súbor tsconfig.json, ktorý samozrejme nič nerobil.

Pridal som toto do tsconfig.json z React stránky Typescriptu:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

...potom kliknite na uložiť a VSCode to už ďalej spracoval.

ÚPRAVA: Odvtedy, čo som pôvodne zverejnil túto odpoveď, sa všeobecné súbory tsconfig stali dostupnejšie. Zverejnil som rozšírenú verziu ako gist, ak by ste chceli pochopiť možnosti.

Odpoveď č. 6

Pridanie "jsx": "react" do jsconfig.json u mňa nefungovalo, ale "jsx": "preserve" áno:

jsconfig.json/tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

Odpoveď č. 7

Apríl 2021 a tento problém stále pretrváva. Používam react-boilerplate-cra-template s react 17.02.

Toto je problém s VSCode, používa predvolene svoj vlastný zabudovaný TypeScript. Stačí otvoriť súbor .tsx a

  1. Stlačte: Ctrl + Shift + P
  2. Zadajte: Typescript: Vyberte verziu typescript...
  3. Vyberte: Použiť verziu pracovného priestoru.

Odpoveď č. 8

Reštartovanie vášho IDE sa zdá byť príliš drastické a nie vždy funguje. Namiesto toho chcete reštartovať TS server:

Poznámka: možnosť sa zobrazí iba vtedy, ak máte v IDE otvorený nejaký súbor súvisiaci s TS

Odpoveď č. 9

Dostal som rovnakú chybu pri migrácii mojej React aplikácie na používanie TypeScriptu. Riešil som to pridaním do môjho tsconfig.json kompilátorovej možnosti jsx s hodnotou react-jsx:

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
  }
}

Populárna odpoveď vyššie navrhuje použiť namiesto toho hodnotu react, čo tiež rieši chybu:

{
  "compilerOptions": {
    ...
    "jsx": "react"
  }
}

Ale videl som rôzne zdroje, ktoré naznačujú, že možnosť react-jsx je vhodnejšia, takže som si myslel, že stojí za to spomenúť aj tento prístup.

Nie som si istý, prečo žiadna z týchto možností nie je na začiatku zahrnutá v tsconfig.json, ktorý sa generuje pri použití možnosti tsc init:

npx tsc --init

Odpoveď č. 10

Ak sa vám tento problém zobrazuje po spustení create-react-app s Typescript, môžete tento problém vyriešiť pridaním "typescript.tsdk": "node_modules/typescript/lib" do .vscode/settings.json.

Pre IntelliSense, ak používate "jsx": "react-jsx", musíte prepnúť svoje pracovisko na použitie TS 4.1+

Alebo vizuálne jednoducho prejdite dole na modrý panel úloh a vyberte verziu TypeScriptu (pravdepodobne 4.x.x niečo), potom vyberte „Vybrať verziu TypeScriptu“.

Potom vyberte „Použiť verziu pracovného priestoru“, ktorá by mala odkazovať na node_modules/typescript/lib

Odpoveď č. 11

Táto odpoveď sa týka VS Code a tejto konkrétnej chyby pretrvávajúcej v tomto IDE. (Niekto to môže nájsť užitočné)

Ak používate niečo ako Webpack alebo nejaké iné podobné nástroje, stále sa vám môže zobraziť táto chyba, aj keď má váš tsconfig nastavenú kompilátorovú možnosť pre JSX na React.

Na toto existuje riešenie. Problém je v tom, že VS Code má zabudovanú automatickú detekciu pre tsc.

Ak sa chcete zbaviť chyby v editore, môžete toto vložiť do svojich používateľských nastavení:

{
    "typescript.tsc.autoDetect": "off"
}

Len si všimnite, že už nedostanete automatickú detekciu tsc, ale ak primárne používate nástroje ako Webpack alebo sami spracovávate príkaz s príznakmi, potom to nie je až taký veľký problém.

Poznámka: Toto robte iba v prípade, že chyba pretrváva vo VS Code. Aby ste sa uistili, že tento problém pretrváva, znovu načítajte okná a reštartujte editor po nakonfigurovaní vášho súboru tsconfig.json.

Súvisiace články