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

152

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.

AJDEV
quelle
Es ist unklar, wo das Problem liegt. babel 7, um den gesamten Code mit den Voreinstellungen env, react und typescript zu kompilieren - warum gibt es sowohl Babel als auch TS und wie hängen sie zusammen? Ich erhalte immer noch den Fehler - welcher? "jsx": "react" - Hinweis: Der Bezeichner React ist fest codiert, daher müssen Sie React mit einem Großbuchstaben R
Estus Flask

Antworten:

224

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 🌹

Basarat
quelle
2
Ich habe das gleiche Problem mit VS Code, aber der Neustart hat mir wirklich geholfen, danke!
Akhmedzianov Danilian
2
Problem verschwand nach dem Neustart von VS Code
NrN
29
Der Fehler bleibt auf meinem Computer. Sieht aus wie "jsx": "react-jsx"ist kein gültiger Wert. Ich erhalte die folgenden Fehler Argument for '--jsx' option must be : 'preserve', 'react-native', 'react'.Aber create-react-appsetzt es "react-jsx". Was soll ich machen?
Amirhosein Al
2
Sie können VS Code auch anweisen, eine bestimmte Version von TypeScript in einem bestimmten Arbeitsbereich zu verwenden, indem Sie eine Arbeitsbereichseinstellung typescript.tsdk hinzufügen, die auf das Verzeichnis der Datei "typescript.tsdk": "./node_modules/typescript/lib" tsserver.js
verweist
2
Das Ändern der Version hat den Trick getan! Schauen Sie sich die Antwort unten an :)
AdamKniec
313

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".

VSCode-Statusleiste

VSCode-Befehlspalette

TypeScript-Arbeitsbereichsversion

Mahmoud K.
quelle
3
Danke, das hat bei mir funktioniert. Diese Option wird jedoch nur angezeigt, wenn Sie sich in einer .tsxDatei befinden.
awran5
6
Dies sollte in den offiziellen Dokumenten für die Create-React-App enthalten sein, da ein großes Publikum VSCode verwendet. Vielen Dank für das Teilen 🙂
Mauricio Klein
4
Ja, und falls sich Ihre App nicht im obersten Ordner Ihres Arbeitsbereichs befindet, können Sie das Typoskriptverzeichnis wie unter code.visualstudio.com/docs/typescript/…
nachtigall
1
Ich habe nicht einmal die Möglichkeit, die Typoskriptversion in die Arbeitsbereichsversion zu ändern. Ich bekomme nur die VS Code Version von 4.0.3, obwohl ich 4.1.2 installiert habe.
Sapper6fd
37

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.

Mel Macaluso
quelle
3
für den Bonus
gestimmt
29

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

Gabriel Petersson
quelle
Es hat bei mir funktioniert. VSC mit TS 4.0.3
Damian
Ja, ich hatte auch das gleiche Setup
Gabriel Petersson
Ja, das war das Problem
Dilip Agheda
3
Ich habe nicht einmal die Möglichkeit, die Typoskriptversion in die Arbeitsbereichsversion zu ändern. Ich bekomme nur die VS-Code-Version 4.0.3, obwohl ich 4.1.2 installiert habe.
Sapper6fd
@ Sapper6fd, ja das gleiche. Der Ersteller der React-Create-App sprach über die Nichtübereinstimmung von vscode-Typoskript und Projekt-Typoskript. Muss vscode / sein Typoskript möglicherweise separat aktualisiert werden?
Gabriel Petersson
13

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".

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

Karl Taylor
quelle
Die bevorzugte Lösung - ändern Sie Ihre IDE-Einstellung, anstatt Ihre Anwendung zu ändern! +1
aaki
10

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.

Dave Kanter
quelle
8

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.

RonniePettyII
quelle
4

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

FireFly0
quelle
4

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.

bluenote10
quelle
Das war mein Fall. Ihre Antwort hat geholfen
Sergey Mell
3

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

Petras
quelle
3

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

João Augusto Tonial Laner
quelle
2

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.

Rosco
quelle
1

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.

Amit Chaurasia
quelle
1

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>
...
QuickDanger
quelle
1

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

Gunther
quelle
1

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 :)

Ahsan Shakeel
quelle
1

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.

Kecheon
quelle
1

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": ["./"]
}
David Bauer
quelle
0

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.

mmizutani
quelle
0

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

Raine Revere
quelle