[Bug]: storybook bug

[Aerojin]

Version

System:  macos 14.4.1
Browsers:  chrome 131.0.6778.205（正式版本） (arm64)
npmPackages:
"@rsbuild/core": "^1.1.13",
    "@rsbuild/plugin-vue": "^1.0.5",
    "@rslib/core": "^0.3.0",
    "@storybook/addon-docs": "^8.4.7",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "@storybook/vue3": "^8.4.7",
    "@types/node": "^22.10.5",
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/compiler-sfc": "^3.5.13",
    "react": "^19.0.0",
    "storybook": "^8.4.7",
    "storybook-addon-rslib": "^0.1.7",
    "storybook-vue3-rsbuild": "^0.1.7",
    "typescript": "^5.7.2",
    "vue": "^3.5.13",
    "vue-tsc": "^2.2.0"

Details

问题

• 自定义用例使用Template.ToString() 是编译后的用例，应该是使用编译前的用例
  
• 正确的用例应该是下面这样
  
• 编译后storybook,部署到cdn上样例加载不出来，排查后发现iframe中使用esModule相对路径引用，导致部署之后找不到文件
  
  
  

复现

• 可以clone以下仓库进行复现
• https://github.com/Aerojin/rslib-demo/

Reproduce link

Reproduce Steps

复现

• 可以clone以下仓库进行复现
• https://github.com/Aerojin/rslib-demo/
• npm install
• npm run storybook
• npm run storybook:build

[BrendanThysse]

Also experiencing this, been a blocker since trying to use "storybook-react-rsbuild", any workaround maybe?

UPDATE:

Found a solution as per 21

Adding the below to the config output assetPrefix in storybook main.ts file:

rsbuildFinal: config => { config.output ||= {} config.output.assetPrefix = './' return config },

[fi3ework]

自定义用例使用Template.ToString() 是编译后的用例，应该是使用编译前的用例
正确的用例应该是下面这样

For this issue, there's no easy way to bypass it. Cause Template.toString() simply serialized the compiled code. You could create an intermediate variable to make it prettier. e.g.

import _XButton from '../src/components/Button.vue'

const XButton = _XButton

编译后storybook,部署到cdn上样例加载不出来，排查后发现iframe中使用esModule相对路径引用，导致部署之后找不到文件

This is another bug report, right?

Are you trying to upload html and JS to CDN? Please provide more information to address.