我在使用动态插槽的时候报错：[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first.

[chinawangyatao]

🧐 Problem Description

我在组件封装的时候用了动态插槽

但是他报错了

我不知道该怎么解决

💻 Sample code

<script setup lang="ts">
import { ICurdTableProps, IModeValuePagination } from './types/h-field-curd-table';
import { ITableEvents, ITableProps } from '@/components/h-components/h-data/types/h-field-table';

const modeValuePagination = defineModel<IModeValuePagination>('modeValuePagination', {
  type: Object,
  default: {
    'limit.pageSize': 10,
    'limit.currentPage': 1,
    total: 5
  }
});
const props = withDefaults(defineProps<ICurdTableProps>(), {
  pageSizes: () => [10, 30, 50, 100],
  tableColumn: () => ({}) as ITableProps,
  tableEvents: () => ({}) as ITableEvents
});
</script>

<template>
  <!-- table -->
  <h-field-table :column="props.tableColumn" :events="props.tableEvents">
    <!-- 重新定义插槽 -->
    <template v-for="(item, index) in props.tableColumn.options" :key="index">
      <template v-if="item.slots?.slot" v-slot:[item.slots.slot]="{ data }">
        <slot :name="item.slots.slot" :data="data" />
      </template>
      <template v-if="item.slots?.header" v-slot:[item.slots.header]="{ data }">
        <slot :name="item.slots.header" :data="data" />
      </template>
      <template v-if="item.slots?.filterIcon" v-slot:[item.slots.filterIcon]="{ filterOpened }">
        <slot :name="item.slots.filterIcon" :filterOpened="filterOpened" />
      </template>
    </template>
  </h-field-table>

  <!-- 分页器 -->
  <h-field-pagination
    :page-count="Number(modeValuePagination.total)"
    v-model:pageSize="modeValuePagination['limit.pageSize']"
    v-model:currentPage="modeValuePagination['limit.currentPage']"
    layout="sizes, prev, pager, next,total"
    :page-sizes="props.pageSizes"
    background
    hideOnSinglePage
  ></h-field-pagination>
</template>

<style scoped lang="scss">
</style>

🚑 Other information

我的 packjson

{
"name": "vite_vue3_js_template",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"once": "yarn && yarn dev",
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"prettier": "prettier . --write",
"jsdoc": "jsdoc src -r",
"codeGenerator": "cd codeGenerator && npm install && npm run start"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@vitejs/plugin-vue-jsx": "^4.0.1",
"@vueuse/core": "^10.11.0",
"axios": "^1.7.3",
"element-plus": "^2.7.8",
"file-saver": "^2.0.5",
"fuse.js": "6.6.2",
"js-cookie": "^3.0.5",
"lodash-es": "^4.17.21",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"pinia": "^2.2.0",
"pinia-plugin-persistedstate": "^3.2.1",
"unplugin-icons": "^0.19.1",
"vite-plugin-qiankun": "^1.0.15",
"vue": "^3.4.31",
"vue-router": "^4.4.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"autoprefixer": "^10.4.20",
"jsdoc": "^4.0.3",
"postcss": "^8.4.41",
"prettier": "3.3.3",
"sass": "^1.77.8",
"tailwindcss": "^3.4.7",
"typescript": "^5.5.4",
"unplugin-auto-import": "^0.18.2",
"unplugin-vue-components": "^0.27.3",
"vite": "^5.3.4"
}
}

[LeeLure]