Почему я получаю эту ошибку импорта Storybook с помощью RollupJS?

У меня есть турборепозиторий с библиотекой компонентов реагирования, которую я публикую в NPM. Назовите это @myscope/react — он связан с CSS с помощью RollupJS. А у Turbo есть несколько хороших документов по публикации локальных пакетов здесь.

В репозитории также есть два приложения: веб-сайт, использующий библиотеку компонентов React, и сборник рассказов. Компоненты корректно импортируются веб-приложением, а TypeScript работает даже в каталоге Storybook. Но когда 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;

Сборник рассказов 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'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Я просмотрел это обсуждение и все равно продолжил. Но мне бы хотелось хотя бы понять, почему это не работает.

Редактировать

Для моих уважаемых коллег, проголосовавших за закрытие моего вопроса без комментариев из-за недостаточности информации для отладки, когда я связал репозиторий GitHub с минимальным воспроизведением, вот скриншот ошибки, которую я получаю по адресу http://localhost:6006/?path=/docs/example-mycomponent--docs

Я ожидаю, что компонент будет отображаться так же, как в localhost:3000.