{"id":2257,"date":"2022-02-04T16:34:20","date_gmt":"2022-02-04T15:34:20","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2257"},"modified":"2022-02-04T16:34:20","modified_gmt":"2022-02-04T15:34:20","slug":"react-typescript-dateiendung-tsx-wird-nicht-erkannt","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2257\/react-typescript-dateiendung-tsx-wird-nicht-erkannt\/","title":{"rendered":"React \u2013 Typescript Dateiendung (.tsx) wird nicht erkannt"},"content":{"rendered":"

Was tun, wenn die Typescript Dateiendungen nicht erkannt werden.<\/p>\n

<\/p>\n

Bei einem React-Projekt hatte ich das Problem, dass meine Komponente in einer .tsx Datei lag, aber beim Ausf\u00fchren nicht erkannt wurde.<\/p>\n

Compiled with problems:X\r\nERROR in .\/src\/App.js 4:0-56\r\nModule not found: Error: Can't resolve '.\/FileUploadComponent' in 'C:\\_git\\react_examples\\fileupload\\src'\r\n \r\nERROR in .\/src\/App.js 4:0-56\r\nModule not found: Error: Can't resolve '.\/FileUploadComponent' in 'C:\\_git\\react_examples\\fileupload\\src'\r\nresolve '.\/FileUploadComponent' in 'C:\\_git\\react_examples\\fileupload\\src'\r\n  using description file: C:\\_git\\react_examples\\fileupload\\package.json (relative path: .\/src)\r\n    Field 'browser' doesn't contain a valid alias configuration\r\n    using description file: C:\\_git\\react_examples\\fileupload\\package.json (relative path: .\/src\/FileUploadComponent)\r\n      no extension\r\n        Field 'browser' doesn't contain a valid alias configuration\r\n        C:\\_git\\react_examples\\fileupload\\src\\FileUploadComponent doesn't exist<\/pre>\n
Meine Entwicklungsumgebung unterkringelte auch die Datei:<\/p>\n
\"\"<\/p>\n
\r\nnpx create-react-app my-app --template typescript\r\n<\/pre>\n
Nachtr\u00e4glich kann die Unterst\u00fctzung mit folgendem Befehl hinzu gef\u00fcgt werden:<\/p>\n
\r\nnpm install --save typescript @types\/node @types\/react @types\/react-dom @types\/jest\r\n<\/pre>\n
Anschlie\u00dfend braucht es noch eine „tsconfig.json“ Datei.<\/p>\n
\"\"<\/p>\n
Hier habe ich den Inhalt aus einem neu generierten Projekt \u00fcbernommen.<\/p>\n
{\r\n    "compilerOptions": {\r\n        "target": "es5",\r\n        "lib": [\r\n            "dom",\r\n            "dom.iterable",\r\n            "esnext"\r\n        ],\r\n        "allowJs": true,\r\n        "skipLibCheck": true,\r\n        "esModuleInterop": true,\r\n        "allowSyntheticDefaultImports": true,\r\n        "strict": true,\r\n        "forceConsistentCasingInFileNames": true,\r\n        "noFallthroughCasesInSwitch": true,\r\n        "module": "esnext",\r\n        "moduleResolution": "node",\r\n        "resolveJsonModule": true,\r\n        "isolatedModules": true,\r\n        "noEmit": true,\r\n        "jsx": "react-jsx"\r\n    },\r\n    "include": [\r\n        "src"\r\n    ]\r\n}\r\n<\/pre>\n
Fertig! Anschlie\u00dfend lief das Projekt.<\/p>","protected":false},"excerpt":{"rendered":"
Was tun, wenn die Typescript Dateiendungen nicht erkannt werden.<\/p>\n","protected":false},"author":1,"featured_media":2260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[44,561],"class_list":["post-2257","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-react"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=2257"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2257\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/2260"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=2257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}