Tree-shaking on a package (monorepo) breaks docgen.

[Powerplex]

Hey :)

We are working on a building a design system named Spark. It is using Vite + Storybook with react-docgen-typescript.

Recently we rewrote one of our packages @spark-ui/icon to have tree shaking, but settings its sideEffects to false and preserveModules to true. It works, the dist folder works and tree-shaking works when importing this package.

But not in storybook, which fails because docGen is invalid. Here is an exemple of the file that storybook tries to import:

1. In my stories I'm importing it like this:

import { Check, FavoriteOutline } from '@spark-ui/icons'

2. The error:

3. The file causing the error (I simplified it because there is normally hundreds of icons):

import {ToysProduct as df} from "/packages/components/icons/dist/icons/ToysProduct.mjs";
import {Accessories as yf} from "/packages/components/icons/dist/icons/Accessories.mjs";

export {df as ToysProduct, yf as Accessories};

d.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "ToysProduct",
    "props": {
        "fill": {
            "defaultValue": {
                "value": "\"currentColor\"",
                "computed": false
            },
            "required": false
        },
        "stroke": {
            "defaultValue": {
                "value": "\"none\"",
                "computed": false
            },
            "required": false
        }
    }
};

;o.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Accessories",
    "props": {
        "fill": {
            "defaultValue": {
                "value": "\"currentColor\"",
                "computed": false
            },
            "required": false
        },
        "stroke": {
            "defaultValue": {
                "value": "\"none\"",
                "computed": false
            },
            "required": false
        }
    }
};

As you can see, docgen is trying to attach data to d and o instead of df and yf. What could cause that ?

Thanks :3

[Powerplex]

I made this "minimal" (as much as possible for that stack) reproduction fork: https://github.com/Powerplex/spark-docgen-fix

[nstuyvesant]

Very similar to the monorepo environment I am working on (lerna, react, vite, typescript, storybook) and issue...

[Error] ReferenceError: Can't find variable: yd

	Module Code (assets/iframe-65deefa8.js:972:17829)

yd.__docgenInfo = {
	description: '',
	methods: [
		{ name: 'addLineEventListener', docblock: null, modifiers: [], params: [], returns: null },
		{ name: 'addNodeEventListener', docblock: null, modifiers: [], params: [], returns: null },
		{
			name: 'traverse',
			docblock: null,
			modifiers: [],
			params: [
				{ name: 'e', type: null },
				{ name: 't', type: null },
				{ name: 'n', type: null }
			],
			returns: null
		},
		{ name: 'getRightArrowIcon', docblock: null, modifiers: [], params: [], returns: null },
		{ name: 'destroy', docblock: null, modifiers: [], params: [], returns: null }
	],
	displayName: 'yd'
}

[nstuyvesant]

This problem seems more like an issue in react-docgen being called from @storybook/react-vite here: https://github.com/storybookjs/storybook/blob/next/code/frameworks/react-vite/src/plugins/react-docgen.ts#L16C1-L20

If I force upgrade to [email protected], I get a more useful error when I build the storybook...

ERR! TypeError: Cannot convert undefined or null to object
ERR!     at Function.values (<anonymous>)
ERR!     at src/plugins/react-docgen.ts (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/react-vite/dist/preset.js:1:3525)
ERR!     at <anonymous> (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/react-vite/dist/preset.js:1:327)
ERR!     at <anonymous> (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/react-vite/dist/preset.js:1:4933)
ERR!     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
ERR!     at Object.viteFinal (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/react-vite/dist/preset.js:1:4899)
ERR!     at build (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/builder-vite/dist/index.js:161:10997)
ERR!     at async Promise.all (index 0)
ERR!     at Module.build2 (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/builder-vite/dist/index.js:161:13364)
ERR!     at async Promise.all (index 0)
ERR!  TypeError: Cannot convert undefined or null to object
ERR!     at Function.values (<anonymous>)
ERR!     at src/plugins/react-docgen.ts (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/react-vite/dist/preset.js:1:3525)
ERR!     at <anonymous> (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/react-vite/dist/preset.js:1:327)
ERR!     at <anonymous> (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/react-vite/dist/preset.js:1:4933)
ERR!     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
ERR!     at Object.viteFinal (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/react-vite/dist/preset.js:1:4899)
ERR!     at build (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/builder-vite/dist/index.js:161:10997)
ERR!     at async Promise.all (index 0)
ERR!     at Module.build2 (/Users/nates/dev/rebase/packages/react/node_modules/@storybook/builder-vite/dist/index.js:161:13364)
ERR!     at async Promise.all (index 0)

My other packages build storybooks with no problem (Angular, Vanilla JS, Svelte, and Vue).

[grybykm]

The same issue causing troubles in storybook https://github.com/storybookjs/storybook/issues/26123