[Bug]: Vue is not defined

[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

rslib.config.ts

import { pluginVue } from "@rsbuild/plugin-vue";
import { defineConfig } from '@rslib/core';

export default defineConfig({

  lib: [
    {
      bundle: true,
      dts: false,
      format: 'esm',
    },
  ],
  output: {
    target: 'web',
    externals: {
      vue: "Vue",
    },
  },
  plugins: [pluginVue()],
});

.storybook/main.ts

export default {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: ["@storybook/addon-essentials", "storybook-addon-rslib"],
  framework: "storybook-vue3-rsbuild", // 例如 storybook-react-rsbuild
};

stories/Button.stories.ts

import { fn } from "@storybook/test";
import type { Meta, StoryObj } from "@storybook/vue3";

import Button from "../src/components/Button.vue";

const meta = {
  title: "Example/Button",
  component: Button,
  tags: ["autodocs"],
  argTypes: {
    size: { control: "select", options: ["small", "medium", "large"] },
    backgroundColor: { control: "color" },
  },
  args: {
    primary: false,
    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
    onClick: fn(),
  },
} satisfies Meta<typeof Button>;

export default meta;

export const Primary = {
  args: {
    primary: true,
    label: "Button",
  },
};

Vue is not defined
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the [Decorators documentation](https://storybook.js.org/docs/writing-stories/decorators).
Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring [Webpack](https://storybook.js.org/docs/builders/webpack) or [Vite](https://storybook.js.org/docs/builders/vite) with Storybook.
Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the [Environment Variables documentation](https://storybook.js.org/docs/configure/environment-variables).
ReferenceError: Vue is not defined
    at Object.vue (http://localhost:65426/static/js/main.iframe.bundle.js:87:18)
    at __webpack_require__ (http://localhost:65426/static/js/runtime~main.iframe.bundle.js:32:21)
    at fn (http://localhost:65426/static/js/runtime~main.iframe.bundle.js:206:10)
    at ./node_modules/@storybook/vue3/dist/chunk-IBPFZ7LW.mjs (http://localhost:65426/static/js/vendors-node_modules_cache_storybook-rsbuild-builder_storybook-config-entry_js-node_modules_r-860c4a.iframe.bundle.js:4852:56)
    at __webpack_require__ (http://localhost:65426/static/js/runtime~main.iframe.bundle.js:32:21)
    at fn (http://localhost:65426/static/js/runtime~main.iframe.bundle.js:206:10)
    at ./node_modules/@storybook/vue3/dist/entry-preview.mjs (http://localhost:65426/static/js/vendors-node_modules_cache_storybook-rsbuild-builder_storybook-config-entry_js-node_modules_r-860c4a.iframe.bundle.js:4912:72)
    at __webpack_require__ (http://localhost:65426/static/js/runtime~main.iframe.bundle.js:32:21)
    at fn (http://localhost:65426/static/js/runtime~main.iframe.bundle.js:206:10)
    at Un.getProjectAnnotations (http://localhost:65426/static/js/vendors-node_modules_cache_storybook-rsbuild-builder_storybook-config-entry_js-node_modules_r-860c4a.iframe.bundle.js:2781:9)

Reproduce link

Reproduce Steps

npx storybook dev

[Aerojin]

rslib.config.ts配置了，就提示 Vue is not defined

 output: {
    externals: {
      vue: "Vue",
    },
  },

[fi3ework]

"vue" is externalized as "Vue" is externalized, how it is supposed to be loaded in runtime then?

[Aerojin]

我们写的是 npm 包，希望是通过使用者来处理这些公共依赖而不是在包内部处理，但是使用 storybook 调试的时候确又提示没有 vue，所以想问下这种情况下该如何处理

 "peerDependencies": {
    "vue": ">=3.5.13"
  },

[fi3ework]

Remove the following code and add "vue" to devDependencies. Refer https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component, they're quite similar in principle.

 output: {
    externals: {
      vue: "Vue",
    },
  },

[fi3ework]

Seems like you already start Storybook via as per #213?