Cannot add property __docgenInfo, object is not extensible | v8.0.9 | React | Vite

[benebene84]

Summary

We are building an internal design system with a shared component library. Up until now, storybook was part of the component library. Now we are trying to set-up a mono-repository in order to able to test components in different frameworks before releasing a component (nextjs app playground).

After moving Storybook to a separate workspace / package and including the component library via workspace, the automatic docgen is throwing this error:

Cannot add property __docgenInfo, object is not extensible TypeError: Cannot add property __docgenInfo, object is not extensible at .../aux-lupine-design-system/packages/lupine-design-system/dist/main.js?t=1714384420755:317:483

The file is the entrypoint of the design system package, so I am a bit puzzled why this is even considered as a component for docgen generation? I also can't include or exclude it via the react-typescript-docgen options. Once I set the react-docgen to false, Storybook renders correctly without the error.

I also initialized a new storybook, it throws the error, as soon as I add the package from the design system workspace.

Any help greatly appreciated!

Additional information

Storybook v8.0.9
main.js:

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

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
    defaultName: 'Overview',
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
};
export default config;

Create a reproduction

No response

[AlexChigrinets]

I had the same issue today. As a workaround I declared my component as "any" instead of React.FC. That worked for me.