ASP.NET Core MVC集成React Vite开发时出现Vite插件检测错误

我正在构建整合React Vite的ASP.NET Core MVC应用，开发模式下尝试将JSX组件动态加载到指定div标签中，但浏览器控制台抛出错误：

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

相关代码 #

Login.cshtml #

@using SphereSocial.Models
@model PageModel
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Model.PageName - SphereSocial</title>
</head>
<body>
    @if (@Model.IsDevelopment)
    {
        <script type="module" src="http://localhost:5173/src/ComponentRoots/loginRoot.jsx"></script>
    }
    else
    {
        <script type="module" src="/dist/assets/loginRoot.js"></script>
    }
    <div class="container">
        <main role="main" class="pb-3">
            <div id="loginroot"></div>
        </main>
    </div>
</body>
</html>

vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            // Proxy API requests to the ASP.NET Core backend during development
            '/api': 'http://localhost:5000',
        },
        hmr: true,  // Enable HMR (it's enabled by default)
    },
    build: {
        outDir: '../wwwroot/dist',
        emptyOutDir: true,
        rollupOptions: {
            input: {
                loginRoot: '/src/ComponentRoots/loginRoot.jsx'
            },
            output: {
                // Set fixed names for entry and chunk files
                entryFileNames: 'assets/[name].js',  // Fixed name for the main entry JavaScript file
                chunkFileNames: 'chunk-[name].js',  // Fixed names for chunk files (if any)
                assetFileNames: 'assets/[name].[ext]', // Fixed asset filenames (like images, CSS, etc.)
            },
        }
    },
    minify: true,
    sourcemap: true,
})

已尝试的排查步骤 #

• 确认@vitejs/plugin-react配置正确，已在vite.config.js中启用
• 清理node_modules并重新执行npm install，问题未解决

解决方案 #

1. 引入Vite开发环境客户端脚本 #

开发模式下，需要先加载Vite的客户端脚本，它会注入React插件所需的preamble代码。修改Login.cshtml的开发环境脚本部分：

@if (Model.IsDevelopment)
{
    <!-- 优先引入Vite客户端脚本 -->
    <script type="module" src="http://localhost:5173/@vite/client"></script>
    <script type="module" src="http://localhost:5173/src/ComponentRoots/loginRoot.jsx"></script>
}

2. 确保React入口文件挂载逻辑正确 #

检查loginRoot.jsx是否正确将React组件挂载到目标div，示例代码如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Login from '../components/Login'; // 替换为你的实际组件路径

const rootElement = document.getElementById('loginroot');
if (!rootElement) throw new Error('未找到loginroot元素');

const root = ReactDOM.createRoot(rootElement);
root.render(<Login />);

3. 配置Vite服务器Origin（可选） #

如果ASP.NET Core与Vite端口不同，可能存在跨域导致的资源加载异常，在vite.config.js中添加origin配置：

server: {
    proxy: {
        '/api': 'http://localhost:5000',
    },
    hmr: true,
    origin: 'http://localhost:5173' // 明确指定Vite服务器地址
}

内容的提问来源于stack exchange，提问作者Simon Markus