RollupJS打包组件库在Storybook中出现导入错误的原因？

背景 #

我有一个Turborepo项目，其中包含要发布至NPM的React组件库@myscope/react，该库使用RollupJS打包并包含CSS。仓库内有两个应用：使用该组件库的网站和Storybook。Web应用可正确导入组件，Storybook目录的TypeScript检查也无问题，但运行Storybook时出现错误。

错误提示 #

The requested module '/@fs/Users/{user}/mre/packages/react/dist/index.js' does not provide an export named 'MyComponent'

我已确认dist/index.js中组件已正确导出，想知道这是否是Storybook模块策略的限制。我已创建最小复现仓库。

相关配置文件 #

.storybook/main.ts #

import type { StorybookConfig } from "@storybook/react-vite";

import { join, dirname } from "path";

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@chromatic-com/storybook"),
    getAbsolutePath("@storybook/addon-interactions"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-vite"),
    options: {},
  },
};
export default config;

Storybook的package.json #

{
  "name": "my-storybook",
  "private": true,
  "version": "0.1.2",
  "type": "module",
  "scripts": {
    "dev": "storybook dev -p 6006",
    "build": "storybook build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@myscope/react": "workspace:*",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "storybook": "^8.2.7"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^1.6.1",
    "@storybook/addon-essentials": "^8.2.7",
    "@storybook/addon-interactions": "^8.2.7",
    "@storybook/addon-links": "^8.2.7",
    "@storybook/addon-onboarding": "^8.2.7",
    "@storybook/blocks": "^8.2.7",
    "@storybook/react": "^8.2.7",
    "@storybook/react-vite": "^8.2.7",
    "@storybook/test": "^8.2.7",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.15.0",
    "@typescript-eslint/parser": "^7.15.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "eslint-plugin-storybook": "^0.8.0",
    "tsconfig": "workspace:*",
    "typescript": "^5.2.2",
    "vite": "^5.3.4"
  }
}

vite.config.ts #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

补充说明 #

我已查阅相关讨论，但仍想明确问题的根本原因。补充错误截图（错误出现在http://localhost:6006/?path=/docs/example-mycomponent--docs）：

期望组件能像在localhost:3000中正常渲染：

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