Laravel+React+Inertia项目报错：this.resolveComponent is not a function

针对Laravel + React + Inertia.js + Vite栈下表格重新渲染出现的this.resolveComponent is not a function错误，可尝试以下解决步骤：

1. 核对依赖版本兼容性 #

首先确认核心依赖版本匹配：

• 确保@inertiajs/react版本 >= 1.0
• laravel-vite-plugin版本与当前Laravel版本对应
• React及ReactDOM版本为18+（因使用createRoot）

执行命令查看当前依赖版本：

npm list @inertiajs/react laravel-vite-plugin react react-dom

若版本不匹配，更新对应依赖：

npm update @inertiajs/react laravel-vite-plugin react react-dom

2. 修改Inertia的resolve函数实现 #

原resolvePageComponent的glob写法可能在重新渲染时出现组件解析异常，改用直接读取glob模块的方式：

// app.jsx
createInertiaApp({
    // ...其他配置
    resolve: async (name) => {
        // 改用eager模式加载页面组件
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true });
        return pages[`./Pages/${name}.jsx`];
    },
    // ...其他配置
});

如果需要懒加载（生产环境推荐），可改为：

resolve: (name) => import(`./Pages/${name}.jsx`),

3. 检查表格组件的渲染逻辑 #

• 确保表格组件的key属性使用数据的唯一标识符（如数据库ID），而非数组索引或动态生成值，避免React重新渲染时组件识别异常。
• 排查表格组件内是否误调用了Inertia的组件解析相关方法，导致渲染上下文混乱。

4. 调整React根节点渲染方式 #

尝试改用hydrateRoot替代createRoot，适配Inertia的服务端渲染/客户端混合场景：

// app.jsx
import { hydrateRoot } from 'react-dom/client';

// ...

setup({ el, App, props }) {
    hydrateRoot(el, <App {...props} />);
},

5. 清除缓存并重建项目 #

• 开发环境下重启Vite服务：npm run dev
• 生产环境重新构建：npm run build
• 清除浏览器缓存（Ctrl+Shift+R强制刷新）

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