my app was running on localhost:3000 just moments ago with no problem, now all of a sudden I am getting the error:

Module not found: Can't resolve './App' in '/my/path/etc/...'

This is happening in my index.js file

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import TimeAgo from "javascript-time-ago";
import { FirebaseAppProvider } from "reactfire";
import en from "javascript-time-ago/locale/en";

TimeAgo.addDefaultLocale(en);

const firebaseConfig = {
  //MY FIREBASE CONFIG
};

ReactDOM.render(
  <React.StrictMode>
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <App />
    </FirebaseAppProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

My file structure looks like this:

If I change the import in my index file from

import App from "./App";

to

import App from "./App.tsx";

It compiles however a different error comes up:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/App.2d194585.tsx') is not a valid name.

EDIT 1 (Added ts config):

    {
  "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",
    "baseUrl": "./src"
  },
  "include": ["src"]
}