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, .tsx
Dateien 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.
reactjs
typescript
jsx
tsx
AJDEV
quelle
quelle
Antworten:
Starten Sie Ihre IDE neu. Manchmal werden Änderungen an tsconfig.json nicht sofort übernommen 🌹
quelle
"jsx": "react-jsx"
ist kein gültiger Wert. Ich erhalte die folgenden FehlerArgument for '--jsx' option must be : 'preserve', 'react-native', 'react'.
Abercreate-react-app
setzt es"react-jsx"
. Was soll ich machen?"typescript.tsdk": "./node_modules/typescript/lib"
tsserver.jsJedes Mal , wenn ich laufen
npm start
, überschreibt es , was ich konfigurieren in{jsx: ...}
mit ,react-jsx
um 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:
quelle
.tsx
Datei befinden.Gehen Denn wer lesen, auf die tsconfig.json und Veränderung , die Linie von
react-jsx
zureact
:{ "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.
quelle
create-react-app
ist aus der Box herausgebrochen.AS OF 2020 DECEMBER
Innerhalb von tsconfig
include
wurde 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
quelle
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+ umstellenOder 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
quelle
In meinem Fall war das Problem, dass der VSCode eine leere
tsconfig.json
Datei generiert hat , die natürlich nichts bewirkt hat.Ich habe das
tsconfig.json
von Typescript's React Page hinzugefügt :{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es6", "jsx": "react" } }
... dann
save
drückte und VSCode nahm es von dort.quelle
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.
quelle
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
quelle
Ich habe diesen Fehler auch beim Ausführen erhalten,
npx tsc --jsx preserve
daher wurde der Fehler--jsx
definitiv angegeben.In meinem Fall wurde dies durch
incremental: true
die tsconfig verursacht. Anscheinend kann im inkrementellen Modustsc
die--jsx
Einstellung ignoriert werden und stattdessen Informationen aus früheren Builds verwendet werden (wo--jsx
noch 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.quelle
Um dies für alle zukünftigen Projekte zu lösen, können Sie die
JavaScript and TypeScript Nightly
Erweiterung für VSCode installieren .quelle
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"
umtarget: "es2017"
eine so scheint es , das Problem zu behandeln, mit etwas wieder kommt, werde ich diesen Kommentar bearbeitenquelle
Ich habe den gleichen Fehler erhalten und nur herausgefunden, wie ich ihn beheben kann. Das Problem war, dass es eine
jsconfig.json
Datei gab, die den TypeScript-Compiler veranlasste, dietsconfig.json
Datei 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. Wenntsconfig.json
diesmal die Datei geöffnet wird, sind Sie golden.quelle
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.
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:
quelle
In meinem Fall habe ich alle
tsconfig.json
Dialogfelder "Projekteigenschaften" ausprobiert , die IDE neu gestartet, die installierte TypeScript-Version usw. überprüft und es trat immer noch dieser Fehler auf. Finden Sie heraus, durchTypeScriptJSXEmit
welchen 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> ...
quelle
Ein Neustart meiner IDE hat nicht geholfen. Durch einen Neustart des TypeScript-Servers wurde dies behoben.
quelle
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 :)
quelle
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.
quelle
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": ["./"] }
quelle
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.
quelle
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.
quelle
Lösung für erhabenen Text:
cd ~/"Library/Application Support/Sublime Text 3/Packages"
git clone https://github.com/microsoft/TypeScript-Sublime-Plugin TypeScript
Sublime Text > Preferences > Settings
"typescript_tsdk": "node_modules/typescript/lib"
Referenz:
https://github.com/microsoft/TypeScript-Sublime-Plugin/issues/538
quelle