Inertia渲染Vue组件报错：Cannot read properties of undefined (reading 'default')

错误根源 #

该错误是因为Inertia的resolve函数未能正确获取到Vue组件的默认导出，导致尝试读取undefined的default属性。

修复步骤 #

1. 修正客户端resolve逻辑 #

修改resources/js/app.js中的resolve函数，确保返回组件的default导出：

import "./bootstrap";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        // 取出组件的默认导出
        return pages[`./Pages/${name}.vue`].default;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

2. 同步SSR服务端配置 #

由于使用了SSR模式，必须保证服务端的resolve逻辑和客户端一致，创建或修改resources/js/ssr.js：

import { createSSRApp, h } from "vue";
import { createInertiaSSR } from "@inertiajs/vue3/server";

export default createInertiaSSR({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        return pages[`./Pages/${name}.vue`].default;
    },
    setup({ App, props, plugin }) {
        return createSSRApp({ render: () => h(App, props) })
            .use(plugin);
    },
});

3. 验证Vite的SSR配置 #

检查vite.config.js，确保正确指定了SSR入口文件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

4. 确认组件路径匹配 #

• 确保组件文件路径为resources/js/Pages/Users/Index.vue，注意大小写（Linux系统区分文件名大小写）
• 控制器中Inertia::render('Users/Index')的名称必须和文件路径完全对应

5. 编译并清除缓存 #

• 执行npm run build重新编译前端资源
• 清除浏览器缓存，避免旧资源影响

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