Props from Re-exported Material UI Components Not Auto-Detected in Storybook with Vite

[Louis345]

Summary

I am experiencing an issue with Storybook when using Vite, where the props from re-exported Material UI components are not being auto-detected and displayed in the controls table. Despite following the recommended configurations for Storybook and Vite, the props are not showing up as expected. Interestingly, I was able to get it to work with Webpack, but for my current project setup, I need it to work with Vite in my monorepo.

Observations
This setup works correctly with Webpack, where all props are detected and displayed in the Storybook controls.
When switching to Vite, the props are not auto-detected, and only explicitly defined props in args are shown.

Environment
Storybook version: 8.2.5
Material UI version: @mui/material": "5.15.18,

Attempts to Resolve
Verified TypeScript and Storybook Configuration:
Ensured that the react-docgen-typescript plugin is properly set up in Storybook configuration.

Tried Alternative Configurations:
Explored various configurations and ensured that all necessary loaders and plugins were included.

Worked with Webpack:
Confirmed that the setup works as expected when using Webpack, indicating a potential issue with Vite integration.

Disclaimer:
I have done searches and have seen issues that are closely related to mine but i couldn't find a solution.

Additional information

main.ts
`import { dirname, join } from "path";
import type { StorybookConfig } from '@storybook/react-vite';

export default {
stories: [
{
directory: '../src',
},
],
framework: '@storybook/react-vite',
addons: ['@storybook/addon-essentials', '@storybook/addon-styling'],
core: {
builder: '@storybook/builder-vite', // 👈 The builder enabled here.
},
typescript: {
reactDocgen: 'react-docgen',
reactDocgenTypescriptOptions: {
// Speeds up Storybook build time
compilerOptions: {
allowSyntheticDefaultImports: false,
esModuleInterop: false,
},
include: ["../../path/to/your/lib//.tsx"],
// Makes union prop types like variant and size appear as select controls
shouldExtractLiteralValuesFromEnum: true,
// Makes string and boolean types that can be undefined appear as inputs and switches
shouldRemoveUndefinedFromOptional: true,
// Filter out third-party props from node_modules except @mui packages
propFilter: (prop) => true,
},
},
docs: {},
} as StorybookConfig;`

Monorepo Structure
I am working within a monorepo setup where we re-export Material UI components from a centralized libs/shared/components/src/index.ts file.

Re-exported Components in index.ts (Simplified to Button)
export { Button, type ButtonProps, } from '@mui/material';
Storybook Story for Button Component
`import type { Meta, StoryObj } from '@storybook/react';
import { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';

export interface ButtonProps extends MuiButtonProps {
label: string;
}

export const Button = ({ label, ...rest }: ButtonProps) => {
return <MuiButton {...rest}>{label};
};

const meta: Meta = {
title: 'Components/Elements/Button',
component: Button,
tags: ['autodocs'],
parameters: {
controls: {
expanded: true, // Adds the description and default columns
},
},
};

export default meta;
export type Story = StoryObj;

export const Playground: Story = {
args: {
label: 'Click me!',
variant: 'contained',
color: 'primary',
size: 'medium',
},
};
`

Create a reproduction

https://stackblitz.com/edit/github-pknzrk?file=src%2Fstories%2FButton.stories.tsx&preset=node