基于Quasar的Storybook组件测试遇Codegen node缺失错误，求解决方案

报错信息：

Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.

问题分析 #

该错误源于Vue模板编译时转换不完整，在Vite+Storybook环境下，Quasar组件的插槽处理需要额外的编译配置支持，导致插槽节点未被正确生成。

解决方案 #

1. 配置Storybook的Vite编译支持 #

在.storybook/main.ts（或.js）中，添加Quasar的Vite插件配置，确保模板转换正确：

import { mergeConfig } from 'vite';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';

export default {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [
        quasar({
          // 若有自定义Quasar变量，取消注释并修改路径
          // sassVariables: 'src/quasar-variables.sass',
        }),
      ],
      vue: {
        template: {
          transformAssetUrls,
        },
      },
    });
  },
};

2. 调整组件插槽的写法 #

给组件中的匿名插槽添加容器包裹，避免裸插槽导致的编译异常：

<template>
  <slot name="header" />
  <q-banner
    class="banner banner-border"
    v-bind="props"
  >
    {{ label }}
    <slot name="action" />
    <slot name="avatar" />
    <!-- 用div包裹匿名插槽 -->
    <div><slot /></div>
  </q-banner>
  <slot name="footer" />
</template>

3. 优化Storybook故事的模板写法 #

避免在模板中直接嵌套args绑定，解构后单独传递属性：

const Default: Story = {
  render: (args) => ({
    components: { AppMoleculeBanner, AppBaseIcon },
    setup() {
      const { color, name, ...restArgs } = args;
      return { color, name, restArgs };
    },
    template: `
      <app-molecule-banner v-bind="restArgs">
        <template #avatar>
          <app-base-icon :color="color" :name="name" />
        </template>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </app-molecule-banner>
    `,
  }),
};

4. 同步依赖版本 #

更新相关依赖，避免版本不兼容问题：

npm update @storybook/vue3-vite @quasar/vite-plugin vite

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