React – Typescript Dateiendung (.tsx) wird nicht erkannt

Was tun, wenn die Typescript Dateiendungen nicht erkannt werden.

Bei einem React-Projekt hatte ich das Problem, dass meine Komponente in einer .tsx Datei lag, aber beim Ausführen nicht erkannt wurde.

Compiled with problems:X
ERROR in ./src/App.js 4:0-56
Module not found: Error: Can't resolve './FileUploadComponent' in 'C:\_git\react_examples\fileupload\src'
 
ERROR in ./src/App.js 4:0-56
Module not found: Error: Can't resolve './FileUploadComponent' in 'C:\_git\react_examples\fileupload\src'
resolve './FileUploadComponent' in 'C:\_git\react_examples\fileupload\src'
  using description file: C:\_git\react_examples\fileupload\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\_git\react_examples\fileupload\package.json (relative path: ./src/FileUploadComponent)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\_git\react_examples\fileupload\src\FileUploadComponent doesn't exist

Meine Entwicklungsumgebung unterkringelte auch die Datei:

npx create-react-app my-app --template typescript

Nachträglich kann die Unterstützung mit folgendem Befehl hinzu gefügt werden:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Anschließend braucht es noch eine “tsconfig.json” Datei.

Hier habe ich den Inhalt aus einem neu generierten Projekt übernommen.

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": [
        "src"
    ]
}

Fertig! Anschließend lief das Projekt.