页面刷新触发500错误：Cannot read properties of undefined (reading 'getSSRProps') 求解决

问题描述 #

页面刷新时触发500错误，报错信息：

Cannot read properties of undefined (reading 'getSSRProps')

错误栈追踪：

at _sfc_ssrRender (C:\Mansi\smicolon-next\components\ValueProject\MultipleSlect.js:39:28)
at renderComponentSubTree (C:\Mansi\smicolon-next\node_modules@vue\server-renderer\dist\server-renderer.cjs.js:683:9)
at renderComponentVNode (C:\Mansi\smicolon-next\node_modules@vue\server-renderer\dist\server-renderer.cjs.js:631:12)
at Module.ssrRenderComponent (C:\Mansi\smicolon-next\node_modules@vue\server-renderer\dist\server-renderer.cjs.js:86:10)

相关组件代码：

MultipleSelect.vue #

<script lang="ts" setup>
const { handleChangeCheckbox, formError, formData } = defineProps(['handleChangeCheckbox', 'formError', 'formData']);
</script>

父组件 #

<template>
<div class="inner-content">
   <MultipleSlect :handleChangeCheckbox="handleChangeCheckbox" :formError="formError" :formData="formData" />
</div>
</template>

解决方案 #

• 修正组件命名拼写：父组件中引用的组件名MultipleSlect存在拼写错误（少了一个e，正确应为MultipleSelect）。SSR渲染时找不到对应组件会触发内部属性读取失败，修正后重新引用：

  <!-- 父组件中修正组件名 -->
  <MultipleSelect :handleChangeCheckbox="handleChangeCheckbox" :formError="formError" :formData="formData" />
  

• 给props设置默认值：子组件中通过defineProps声明的属性，若SSR渲染时未传入或为undefined，会引发渲染异常。给props添加默认值避免读取undefined属性：

  <script lang="ts" setup>
  const props = defineProps({
    handleChangeCheckbox: {
      type: Function,
      default: () => {}
    },
    formError: {
      type: Object,
      default: () => ({})
    },
    formData: {
      type: Object,
      default: () => ({})
    }
  });
  </script>
  

• 验证组件导入路径：确认父组件已正确导入MultipleSelect组件，且文件路径无错误：

  <script setup>
  import MultipleSelect from '@/components/ValueProject/MultipleSelect.vue';
  </script>
  

• 清理缓存并重新构建：若以上步骤无效，清理项目缓存与构建产物后重新安装依赖、构建项目：

  rm -rf node_modules .next
  npm install
  npm run build
  

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