搭建Django+Inertia.js+Vue3应用时控制台报错致页面空白

报错信息 #

@inertiajs_vue3.js?v=27379e18:7079 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'component')
    at createInertiaApp (@inertiajs_vue3.js?v=27379e18:7079:65)
    at main.js:6:1
createInertiaApp @ @inertiajs_vue3.js?v=27379e18:7079
(anonymous) @ main.js:6

排查与解决步骤 #

• 检查createInertiaApp的页面配置
  这个报错核心原因是路由匹配的页面组件为null，打开main.js确认resolve函数的页面路径逻辑：

  createInertiaApp({
    resolve: (name) => {
      // 确保路径匹配规则正确，避免拼写、层级或大小写错误
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
      return pages[`./Pages/${name}.vue`]
    },
    // 其他配置项
  })
  

  重点核对后端返回的组件名称和前端文件的大小写、文件名是否完全一致，部分系统环境会区分大小写。

• 验证后端Inertia响应内容
  在浏览器网络面板中查看页面请求的响应，检查page字段里的component值是否有效，若后端返回了不存在或拼写错误的组件名称，会直接触发该报错。

• 确认组件导入正确性
  若手动导入组件而非批量导入，检查导入路径和文件名是否准确：

  // 错误示例：文件名拼写错误
  import Dashboard from './Pages/Dashbaord.vue'
  // 正确示例：路径与文件名完全匹配
  import Dashboard from './Pages/Dashboard.vue'
  

• 检查Vue挂载根元素
  页面空白可能伴随挂载节点缺失问题，确认index.html中存在挂载节点：

  <div id="app"></div>
  

  同时确保createInertiaApp的setup函数正确挂载：

  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  }
  

• 排查异步加载异常
  若使用组件懒加载，可暂时改为同步导入测试，确认是否因异步加载失败导致组件为null，逐步排查懒加载逻辑的问题。

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