Trouble importing a TSX file into a JSX file

I'm trying to set up a basic SSR react app, using typescript for the frontend and js for the server.

The main App component is a .tsx file.

But I am facing the following error:

Error: Cannot find module '../src/App' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)

In my renderSSR.js file I:

import App from "../src/App";

(this should be importing ../src/App.tsx)

If I change the server side to be all .ts files and use ts-node everything works. But I do not wish to do this.

Some relevant parts of my webpack file:

config.resolve = {
    extensions: [".tsx", ".ts", ".js", ".jsx"]
  };

config.module = {
     rules: [
      // Babel
      {
        test: /\.(js|jsx)$/,
        include: resolvePath("../src"),
        loader: "babel-loader",
        options: {
          cacheDirectory: IS_DEV,
          compact: IS_PROD
        }
      },
      // TS
      {
        test: /\.ts(x?)$/,
        loader: "ts-loader",
        exclude: /node_modules/
      },

Update: I can get past this import problem by changing the import statement to:

import App from "../src/App.tsx";

However this then results in the following error in the newly imported App.tsx file:

{ import * as React from "react";
^ SyntaxError: Unexpected token *

In typescript that how you import React.