[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.

[fi3ework]

We temporarily close this issue due to inactivity. Feel free to reopen if there's any update.

[Aerojin]

自定义用例使用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.

编译后的产物需要上传的 cdn 或者 web 服务器，因为开发的产物需要在整个团队使用，所以必须得有个服务来承载，但是上传到服务器后就遇到上面的问题

[Aerojin]

/reopen

[fi3ework]

Could you provide how you changed the config file? I'm not sure whether it's still work in storybook7 (see storybookjs/storybook#1291).

[Aerojin]

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

[fi3ework]

Will take a time to check it this week, but this feature it's not promised to work due to the pivot of Storybook.