使用Inertia+Django+Vue提交表单时出现this.resolveComponent不是函数错误

问题场景 #

Vue页面提交表单后，数据库更新正常，页面显示的用户信息也已同步更新，但控制台抛出以下错误：

Vue组件（FormTest.vue） #

<template>
  {{ user }}
  <form @submit.prevent="submit">
    <input type="text" v-model="user.first_name" label="First name" />
    <input type="text" v-model="user.last_name" label="Last name" />
    <button type="submit">Save</button>
  </form>
</template>

<script setup lang="ts">
import {User} from '@/types/users';
import {router} from '@inertiajs/vue3';

const props = defineProps<{
  user: User;
}>();

function submit() {
  router.post('/form-test', {
    first_name: props.user.first_name,
    last_name: props.user.last_name,
  });
}
</script>

Django视图 #

def form_test(request):
    user_instance = get_object_or_404(CustomUser, pk=request.user.id)

    if request.method == "POST":
        form_data = dict_to_querydict(json.loads(request.body))

        form = CustomUserForm(form_data)

        if form.is_valid():
            user_instance.first_name = form.cleaned_data["first_name"]
            user_instance.last_name = form.cleaned_data["last_name"]
            user_instance.save()

    return render(
        request,
        "FormTest",
        props={"user": CustomUser.objects.get(id=request.user.id)},
    )

控制台错误信息 #

router.ts:452 Uncaught (in promise) TypeError: this.resolveComponent is not a function
    at C.setPage (router.ts:452:33)
    at router.ts:390:21
setPage @ router.ts:452
(anonymous) @ router.ts:390
XMLHttpRequest.send (async)
dispatchXhrRequest @ xhr.js:251
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:148
wrap @ bind.js:5
visit @ router.ts:342
post @ router.ts:527
submit @ FormTest.vue:20
(anonymous) @ runtime-dom.esm-bundler.js:1328
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:278
Show 13 more frames

解决思路 #

这个错误的核心原因是：Inertia.js通过router.post发起AJAX请求时，期望后端返回符合Inertia规范的JSON响应，但当前Django视图返回的是完整HTML页面，导致Inertia无法解析组件信息。

具体修正步骤 #

1. 改用Inertia专用的响应方式
   替换普通的render()，使用Inertia提供的redirect()或render()方法返回响应：

   from inertia import render, redirect
   
   def form_test(request):
       user_instance = get_object_or_404(CustomUser, pk=request.user.id)
   
       if request.method == "POST":
           form_data = dict_to_querydict(json.loads(request.body))
           form = CustomUserForm(form_data)
   
           if form.is_valid():
               user_instance.first_name = form.cleaned_data["first_name"]
               user_instance.last_name = form.cleaned_data["last_name"]
               user_instance.save()
               # 推荐：采用PRG模式重定向到当前页面，避免重复提交
               return redirect('form-test')
               # 可选：直接返回更新后的组件数据
               # return render(request, "FormTest", props={"user": user_instance})
   
       # GET请求时正常返回Inertia组件
       return render(request, "FormTest", props={"user": user_instance})
   

2. 优化数据库查询
   原视图中POST后重复查询了一次用户数据，直接使用已更新的user_instance即可，减少不必要的数据库操作。

3. 验证Inertia配置
   确保Django项目已正确配置Inertia中间件，且前后端Inertia版本保持兼容。

错误原因说明 #

Inertia的AJAX请求需要后端返回包含component、props等字段的JSON结构，而普通render()返回的是完整HTML页面。当Inertia尝试解析HTML响应时，无法找到所需的组件信息，进而触发resolveComponent相关的类型错误。

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