Laravel集成InertiaJS-React遇React is not defined错误求助

我按照InertiaJS官网的服务端与客户端指导，在现有Laravel项目中完成集成配置。相关代码如下：

app.jsx 文件 #

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    return pages[`./Pages/${name}.jsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

resources/js/Pages/HelloWorld.jsx 文件 #

import React from 'react'
import { Head } from '@inertiajs/react'

export default function HelloWorld () {
  return (
    <div>
      <Head title="Hello World" />
      <h1>Hello World</h1>
    </div>
  )
}

routes/web.php 文件 #

Route::get('/hello', function () {
    return \Inertia\Inertia::render('HelloWorld');
});

启动服务器访问/hello时页面空白，控制台提示错误“React is not defined”。已尝试执行npm install react、npm install react-dom，清理缓存、删除node_modules后重装依赖，但问题仍未解决。请问可能是什么原因？

• Vite未配置React插件：Laravel Vite默认不会自动处理React的JSX转换，若未在配置中启用React插件，编译时无法识别JSX语法依赖的React环境。
  解决：修改vite.config.js，添加React插件：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: 'resources/js/app.jsx',
              refresh: true,
          }),
          react(),
      ],
  });
  

• JSX转换模式不匹配：React 17+支持自动导入JSX所需函数，但需确保编译配置使用automatic模式。若为旧的classic模式，即使手动导入React也可能出现作用域问题。
  解决：在项目根目录创建jsconfig.json（或tsconfig.json）配置JSX模式：

  {
    "compilerOptions": {
      "jsx": "react-jsx"
    }
  }
  

• 根视图挂载元素错误：Inertia需要正确的DOM元素挂载React应用，若根视图（如resources/views/app.blade.php）的挂载元素或指令有误，会导致应用无法正常初始化。
  确保根视图包含：

  <div id="app" @inertia></div>
  @vite('resources/js/app.jsx')
  

• 依赖版本不兼容：@inertiajs/react与react、react-dom版本不匹配可能引发此类错误，比如旧版Inertia适配器不兼容React 18+的特性。
  解决：检查package.json中相关依赖版本，确保@inertiajs/react与react、react-dom的大版本兼容（推荐使用稳定的同系列版本）。

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