JSX kann nur verwendet werden, wenn das Flag '--jsx' angegeben ist

Ich habe mich ein bisschen nach einer Lösung für dieses Problem umgesehen. Alle schlagen vor "jsx": "react", Ihrer tsconfig.json-Datei etwas hinzuzufügen. Was ich getan habe. Ein anderer war hinzuzufügen "include: []", was ich auch getan habe. Ich erhalte jedoch immer noch den Fehler, wenn ich versuche, .tsxDateien zu bearbeiten . Unten ist meine tsconfig-Datei.

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

Anregungen wären hilfreich. Ich verwende Babel 7, um den gesamten Code mit den Presets env, react und typescript zu kompilieren. Wenn ihr mehr Dateien zum Debuggen benötigt, lasst es mich wissen.

JSX kann nur verwendet werden, wenn das Flag '--jsx' angegeben ist

Starten Sie Ihre IDE neu. Manchmal werden Änderungen an tsconfig.json nicht sofort übernommen 🌹

Jedes Mal , wenn ich laufen npm start, überschreibt es , was ich konfigurieren in {jsx: ...}mit , react-jsxum kompatibel zu sein mit JSX in 17 Reagieren verwandeln.

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)

Das Problem ist, dass VSCode eine ältere Version von Typoskript (4.0.3) verwendet, während die mit dem Projekt gelieferte Typoskriptversion (4.1.2) ist.

Folgendes hat den Trick für mich getan:

1. Gehen Sie zur Befehlspalette CTRL+ Shift+ P.
2. Wählen Sie "TypeScript: Wählen Sie eine TypeScript-Version ...".
3. Wählen Sie "Arbeitsbereichsversion verwenden".

Gehen Denn wer lesen, auf die tsconfig.json und Veränderung , die Linie von react-jsxzu react:

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

Bonus: Versuchen Sie auch, die IDE TS-Version in vscode CMD + SHIFT + P auf die neueste Version (atm 4.2) einzustellen und von dort aus zu ändern.

create-react-app ist aus der Box herausgebrochen. AS OF 2020 DECEMBER

Innerhalb von tsconfig includewurde nur Folgendes festgelegt /src: Ändern in:

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

Der Ersteller der React-Create-App hat diese Kombination auch vorgeschlagen in package.json:

 "react-scripts": "^4.0.1",
 "typescript": "^4.1.2"

Und dabei cmd + shift + p-> select typescript version->Use Workspace Version 4.1.2

Wenn Sie dieses Problem sehen nach dem Ausführen von create-reagieren-App mit Typoskript Sie können dieses Problem lösen , indem das Hinzufügen "typescript.tsdk": "node_modules/typescript/lib"zu .vscode/settings.json.

Wenn Sie IntelliSense verwenden "jsx": "react-jsx", müssen Sie Ihren Arbeitsbereich auf TS 4.1+ umstellen

Oder gehen Sie visuell einfach in die blaue Taskleiste und wählen Sie die Typescript-Version (wahrscheinlich 4.xx etwas) und dann "Select TypeScript Version".

Wählen Sie dann "Workspace-Versionsversion verwenden", auf die verwiesen werden soll node_modules/typescript/lib

In meinem Fall war das Problem, dass der VSCode eine leere tsconfig.jsonDatei generiert hat , die natürlich nichts bewirkt hat.

Ich habe das tsconfig.jsonvon Typescript's React Page hinzugefügt :

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

... dann savedrückte und VSCode nahm es von dort.

Diese Antwort bezieht sich auf VS-Code und diesen bestimmten Fehler, der in dieser IDE weiterhin besteht. (Jemand könnte dies nützlich finden)

Wenn Sie etwas wie Webpack oder ein anderes solches Tool verwenden, wird dieser Fehler möglicherweise immer noch angezeigt, auch wenn in Ihrer tsconfig die Compileroption für jsx auf React gesetzt ist.

Hierfür gibt es eine Lösung. Das Problem ist, dass VS Code die automatische Erkennung für tsc integriert hat.

Um den Fehler im Editor zu beseitigen, können Sie dies in Ihre Benutzereinstellungen einfügen:

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

Beachten Sie nur, dass Sie keine automatische Erkennung von tsc mehr erhalten. Wenn Sie jedoch hauptsächlich Tools wie Webpack verwenden oder den Befehl selbst mit Flags behandeln, ist dies keine große Sache.

Hinweis: Tun Sie dies nur, wenn der Fehler im VS-Code weiterhin besteht. Um sicherzustellen, dass dieses Verhalten weiterhin besteht, laden Sie die Fenster neu und starten Sie den Editor neu, nachdem Sie Ihre Datei tsconfig.json konfiguriert haben.

Das Neustarten meiner IDE in meinem Fall war das Problem. Nachdem ein Meldungsfeld neu gestartet wurde und angezeigt wurde, dass kein Typoskript installiert ist, möchten Sie TypeScript 3.3 installieren? Ich habe es installiert und jetzt funktioniert es perfekt. Siehe hier für das Ausgabefenster

Ich habe diesen Fehler auch beim Ausführen erhalten, npx tsc --jsx preservedaher wurde der Fehler --jsxdefinitiv angegeben.

In meinem Fall wurde dies durch incremental: truedie tsconfig verursacht. Anscheinend kann im inkrementellen Modus tscdie --jsxEinstellung ignoriert werden und stattdessen Informationen aus früheren Builds verwendet werden (wo --jsxnoch deaktiviert war). Als Lösung habe ich die inkrementelle Kompilierung vorübergehend deaktiviert, neu kompiliert und wieder aktiviert. Möglicherweise funktioniert das Löschen der Build-Artefakte auch.

Um dies für alle zukünftigen Projekte zu lösen, können Sie die JavaScript and TypeScript NightlyErweiterung für VSCode installieren .

In meinem Fall funktionierte keine der Lösungen, daher habe ich mir die Version von ECMA Scrypt angesehen. Meine Version war ec5, Sie können hier überprüfen -> tsconfig.json . Also habe ich versucht , das wechseln , target: "es5" um target: "es2017"eine so scheint es , das Problem zu behandeln, mit etwas wieder kommt, werde ich diesen Kommentar bearbeiten

Ich habe den gleichen Fehler erhalten und nur herausgefunden, wie ich ihn beheben kann. Das Problem war, dass es eine jsconfig.jsonDatei gab, die den TypeScript-Compiler veranlasste, die tsconfig.jsonDatei zu ignorieren .

Um festzustellen, ob Sie das gleiche Problem haben, laden Sie in Ihrer IDE (ich verwende VS-Code) eine Datei mit dem Fehler in Ihrem Editor, rufen Sie die Befehlspalette auf und geben Sie "TypeScript: Gehe zur Projektkonfiguration" ein. Wenn es geöffnet wird jsconfig.json, löschen Sie diese Datei und starten Sie Ihre IDE neu. Wenn tsconfig.jsondiesmal die Datei geöffnet wird, sind Sie golden.

Dieser Link war hilfreich, um dieses Problem zu beheben: https://staxmanade.com/2015/08/playing-with-typescript-and-jsx/

Siehe Abschnitt: Fehlerbehebung TS17004: JSX kann nur verwendet werden, wenn das Flag '--jsx' angegeben ist.

Der nächste Fehler ist neu für mich, aber es macht Sinn, also füge ich das Flag --jsx zu tsc hinzu und versuche tsc --jsx helloWorld.tsx, aber es sieht so aus, als hätte ich einen Parameter zu --jsx verpasst.

tsc --jsx helloWorld.tsx message TS6081: Das Argument für '--jsx' muss 'bewahren' oder 'reagieren' sein. In der aktuellen Iteration von TypeScript 1.6 scheint es zwei Optionen für --jsx zu geben, die beide beibehalten oder reagieren.

Bewahren behält das jsx in der Ausgabe bei. Ich gehe davon aus, dass Sie Tools wie JSX verwenden können, um die Übersetzung tatsächlich bereitzustellen. react entfernt die jsx-Syntax und wandelt sie in einfaches Javascript um, sodass in der TSX-Datei React.createElement ("div", null) wird. Wenn wir die Reaktionsoption übergeben, landen wir hier:

tsc --jsx reagieren helloWorld.tsx helloWorld.tsx (11,14): Fehler TS2607: JSX-Elementklasse unterstützt keine Attribute, da sie keine 'Requisiten'-Eigenschaft hat helloWorld.tsx (11,44): Fehler TS2304: Kann nicht finde den Namen 'mountNode'. Ich werde den letzten Fehler als nächstes angehen, da ich den obigen JSX-Fehler anfangs nicht verstanden habe.

In meinem Fall habe ich alle tsconfig.jsonDialogfelder "Projekteigenschaften" ausprobiert , die IDE neu gestartet, die installierte TypeScript-Version usw. überprüft und es trat immer noch dieser Fehler auf. Finden Sie heraus, durch TypeScriptJSXEmitwelchen Entwickler das Projekt der Projektdatei bedingte Eigenschaften hinzugefügt hat, die nicht in allen Konfigurationen definiert sind (was das Dialogfeld Projekteigenschaften verwirrte).

Hier ist ein Auszug aus meiner Projektdatei, der das Problem zeigt:

...
  <PropertyGroup Condition="'$(Configuration)' == 'QA'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>React</TypeScriptJSXEmit>
...

Ein Neustart meiner IDE hat nicht geholfen. Durch einen Neustart des TypeScript-Servers wurde dies behoben.

Der folgende Fehler wird nach dem Start des Garns angezeigt :

> multi-step-form-typescript@0.1.0 start /home/ehsan/Documents/GitHub/multi-step-form-typescript
> react-scripts start

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! multi-step-form-typescript@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the multi-step-form-typescript@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ehsan/.npm/_logs/2020-11-22T18_20_20_546Z-debug.log

Also, was müssen Sie tun, um dies loszuwerden

Klicken Sie auf Ihrem Terminal auf den Fehlerlink

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions [option] = value;

und ändern Sie dann die 239 Zeilen in

sonst wenn (parsedCompilerOptions [Option]! == valueToCheck && Option! == "jsx")

Nachdem Sie dies geändert haben, gehen Sie zu tsconfig.json

und dann ersetzen Sie "jsx": "react-jsx" durch "jsx": "react"

Führen Sie nun Ihr Projekt mit Sudo Garn Start aus

Es ist Arbeit für mich, hoffe das funktioniert auch für dich :)

In meinem Fall hat keines der oben genannten Verfahren funktioniert. Mein Problem war, dass der Speicherort von tsconfig.json nicht der Projektstamm war. Damit dieser Scherz keine .jsx-Dateien lesen konnte. Ich habe es gelöst, indem ich tsconfig.json einfach mit dem Projektstamm verknüpft habe. Es könnte eine bessere Lösung geben. Lassen Sie mich wissen, wenn Sie eine haben.

Ich musste meine ganze App hinzufügen include.

Meine tsconfig.json sieht also so aus:

{
    "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "jsx": "react",
    "allowJs": true
  },
  "include": ["./"]
}

Ich folgte der hier erwähnten "Simpler Solution" https://github.com/facebook/create-react-app/issues/10144#issuecomment-733278351

"... aktualisiere die TS-Version in package.json auf 4.1.2"

und dann VS Code neu gestartet.

Ein einfacher Neustart des TS-Servers mit der Befehlspalette hat es für mich nicht getan.

Ich brauchte keine weiteren Schritte.

In meinem Fall reichte es nicht aus, VSCode neu zu starten und Typoskript und Run-Skripte auf die entsprechenden Versionen zu aktualisieren. Durch die Neuerstellung nach dem Löschen der .eslintcache-Datei wurde der Fehler endgültig behoben.

Lösung für erhabenen Text:

1. Stellen Sie sicher, dass Ihre package.json Typescript> = v4.1.2 verwendet
2. Deinstallieren Sie das Sublime Text "Typescript" -Paket über Package Control
   • Zum Zeitpunkt des Schreibens wird Typescript v3.x gebündelt
3. Öffnen Sie ein Terminal im Verzeichnis "Pakete" von Sublime Text.
   • cd ~/"Library/Application Support/Sublime Text 3/Packages"
4. Klonen Sie das Repo Typescript-Sublime-Plugin in Ihr Paketverzeichnis:
   • git clone https://github.com/microsoft/TypeScript-Sublime-Plugin TypeScript
5. Benutzereinstellungen öffnen: Sublime Text > Preferences > Settings
6. Hinzufügen "typescript_tsdk": "node_modules/typescript/lib"
   • Dies weist das Sublime Typescript-Plugin an, die Projektversion von Typescript anstelle der mitgelieferten Version zu verwenden.
7. Starten Sie Sublime Text neu
   • Im Gegensatz zu den meisten Sublime Text-Einstellungen erfordert diese einen Neustart, um den Typescript-Server neu zu starten.

Referenz:
https://github.com/microsoft/TypeScript-Sublime-Plugin/issues/538