reactjs - Problem med att importera en TSX-fil till en JSX-fil

Jag försöker sätta upp en grundläggande SSR React-app, med TypeScript för frontend och JS för servern.

Huvud-App-komponenten är en .tsx-fil.

Men jag stöter på följande fel:

Fel: Kan inte hitta modulen '../src/App' vid Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)

I min renderSSR.js-fil gör jag:

importera App från "../src/App";

(detta borde importera ../src/App.tsx)

Om jag ändrar serversidan till att vara alla .ts-filer och använder ts-node fungerar allt. Men jag vill inte göra detta.

Några relevanta delar av min webpack-fil:

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/
      },

Uppdatering: Jag kan komma förbi detta importproblem genom att ändra import-satsen till:

importera App från "../src/App.tsx";

Detta resulterar dock i följande fel i den nyimporterade App.tsx-filen:

{ importera * som React från "react";
^SyntaxError: Oväntat tecken *

I TypeScript är det så här du importerar React.