尝试通过 Vite 开发服务器向 ASP.NET 项目提供文件时出现 React Preamble 错误

Question

我正在尝试使用使用 React 和 Vite 作为捆绑器的 ClientApp 设置 ASP.NET MVC 应用程序。这应该是 MPA 而不是 SPA，所以 我的应用程序的每个页面都会有一个单独的 .tsx 文件（即 home.tsx、about.tsx 等）

在开发过程中，ClientApp 文件应由 Vite 开发服务器提供给我的 HMR ASP.NET 应用程序，而在生产中，应用程序将使用 wwwroot/dist 中的捆绑文件。

我尝试设置我的Program.cs以使用Vite.AspNetCore包与Vite开发服务器通信。

程序.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>

换句话说，我正在尝试从 ClientApp/src/theme/site.css 读取 site.css 文件，以及与我所在的特定页面关联的 index.tsx 文件， 例如 ClientApp/src/pages/home/index.tsx。页面名称（如“home”）存储在 Razer 视图顶部的 ViewData["ViteScript"] 中。

所以我在端口 5173 上运行我的 Vite 开发服务器，然后运行我的 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 应用程序在 localhost:44380 上运行，Vite 开发服务器在 localhost:5173 上运行（及其文件，如 ExampleComponent.tsx 和pages/home/index.html）。 tsx.

这是解决方案资源管理器中我的 ClientApp 的屏幕截图：

如果有人在尝试将 Vite 开发服务器集成到 MPA 时遇到类似的问题，我将非常感谢您的帮助。

谢谢！

Answer 1

您还需要添加react-refresh脚本以使开发服务器与React一起工作。 您可以在后端集成页面看到它。