Ошибка React Preamble при попытке передать файлы через сервер разработки Vite в проект ASP.NET

Я пытаюсь настроить приложение ASP.NET MVC с ClientApp, которое использует React с Vite в качестве сборщика. Предполагается, что это будет MPA, а не SPA, поэтому для каждой страницы моего приложения будет отдельный файл .tsx (т. е. home.tsx, about.tsx и т. д.).

Во время разработки файлы ClientApp должны передаваться сервером разработки Vite моему приложению ASP.NET для HMR, а в рабочей среде приложение будет использовать связанные файлы в wwwroot/dist.

Я попытался настроить свой Program.cs для связи с сервером разработки Vite, используя пакет Vite.AspNetCore.

Программа.cs:

using Vite.AspNetCore.Extensions;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddViteServices(options =>
{
    options.PackageDirectory = "ClientApp"; // Set the root path to the ClientApp folder
});

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}
else
{
    app.UseViteDevelopmentServer();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Чтобы читать с сервера разработки Vite, я добавил следующий блок в свой файл _Layout.cshtml, который будет использоваться всеми моими представлениями:

<environment include = "Development">
    <script type = "module" src = "https://localhost:5173/@@vite/client"></script>
    <link rel = "stylesheet" href = "https://localhost:5173/src/theme/site.css" />
    @if (ViewData["ViteScript"] != null)
    {
        <script defer type = "module" src = "@($"https://localhost:5173/src/pages/{ViewData["ViteScript"]}/index.tsx")"></script>
    }
</environment>

Другими словами, я пытаюсь прочитать файл site.css из ClientApp/src/theme/site.css и файл index.tsx, связанный с конкретной страницей, на которой я нахожусь, например ClientApp/src/pages/home/index.tsx. Имя страницы (например, «домашняя») хранится в ViewData["ViteScript"] в верхней части представления Razer.

Итак, я запускаю свой сервер разработки Vite на порту 5173, а затем запускаю свое приложение ASP.NET, но получаю общее сообщение:

"Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong."

Для справки, вот мой файл vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import mkcert from "vite-plugin-mkcert";
import appsettings from "../appsettings.json";
import appsettingsDev from "../appsettings.Development.json";

const cssPattern = /\.css$/;
const imagePattern = /\.(png|jpe?g|gif|svg|webp|avif)$/;

export default defineConfig({
  plugins: [react(), mkcert()],
  build: {
    manifest: appsettings.Vite.Manifest,
    outDir: "../wwwroot/dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        home: "./src/pages/home/index.tsx",
        site: "./src/site.ts",
        styles: "./src/theme/site.css",
      },
      output: {
        entryFileNames: "js/[name].js",
        chunkFileNames: "js/[name]-chunk.js",
        assetFileNames: (info) => {
          if (info.name) {
            if (cssPattern.test(info.name)) {
              return "css/[name][extname]";
            }
            if (imagePattern.test(info.name)) {
              return "images/[name][extname]";
            }

            return "assets/[name][extname]";
          } else {
            return "[name][extname]";
          }
        },
      },
    },
  },
  server: {
    port: appsettingsDev.Vite.Server.Port,
    strictPort: true,
    hmr: {
      host: "localhost",
      clientPort: appsettingsDev.Vite.Server.Port,
    },
  },
});

Когда я проверяю вкладку «Источники» инструментов разработчика Chrome, я вижу приложение ASP.NET, работающее на локальном хосте: 44380, и сервер разработки Vite, работающий на локальном хосте: 5173 (и его файлы, такие как exampleComponent.tsx иpages/home/index.tsx .

Вот снимок экрана моего ClientApp в обозревателе решений:

Если кто-нибудь сталкивался с подобной проблемой при попытке интегрировать сервер разработки Vite в MPA, я был бы признателен за вашу помощь.

Спасибо!