reactjs - Probleme la importarea unui fișier TSX într-un fișier JSX

Încerc să configurez o aplicație React SSR de bază, folosind TypeScript pentru frontend și JS pentru server.

Componenta principală App este un fișier .tsx.

Dar mă confrunt cu următoarea eroare:

Eroare: Nu se poate găsi modulul '../src/App' la Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)

În fișierul meu renderSSR.js eu:

import App din "../src/App";

(acesta ar trebui să importe ../src/App.tsx)

Dacă schimb partea de server să fie toate fișiere .ts și folosesc ts-node, totul funcționează. Dar nu doresc să fac asta.

Unele părți relevante din fișierul meu webpack:

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

Actualizare: Pot depăși această problemă de import modificând declarația de import astfel:

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

Cu toate acestea, acest lucru duce apoi la următoarea eroare în fișierul App.tsx recent importat:

{ import * as React from "react";
^Eroare de sintaxă: simbol neașteptat *

În TypeScript așa importi React.