Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Powerplex opened this issue May 2, 2023 · 4 comments
Open

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

Powerplex opened this issue May 2, 2023 · 4 comments

Comments

@Powerplex
Copy link

Powerplex commented May 2, 2023

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'
  1. The error:
    Capture d’écran 2023-05-02 à 14 23 15

  2. 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
Copy link
Author

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

@nstuyvesant
Copy link

nstuyvesant commented May 5, 2023

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
Copy link

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 react-docgen@6.0.0-rc.8, 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
Copy link

grybykm commented Feb 20, 2024

The same issue causing troubles in storybook storybookjs/storybook#26123

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants