[Bug]: Using material ui with storybooks results with "_interopRequireDefault2 is not a function" error.

[akrynski-1]

Describe the bug

I decided to try storybook with react and vite and it looks like it does not work with material ui.

Importing any component (for example Button) results with the following error:

TypeError: _interopRequireDefault2 is not a function
    at node_modules/@mui/system/colorManipulator.js (https://gqairkxxypgithub-v51r--6006--70dbe416.local-credentialless.webcontainer.io/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@mui_material.js?v=a14f6c47:2995:35)
    at __require2 (https://gqairkxxypgithub-v51r--6006--70dbe416.local-credentialless.webcontainer.io/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-LK32TJAX.js?v=a14f6c47:18:50)
    at https://gqairkxxypgithub-v51r--6006--70dbe416.local-credentialless.webcontainer.io/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@mui_material.js?v=a14f6c47:10557:39

Example code:

MuiButton.tsx

import { Button } from '@mui/material';

export const MuiButton = () => {
  return <Button>Click me</Button>;
};

MuiButton.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { MuiButton } from './MuiButton';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Example/MuiButton',
  component: MuiButton,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    // backgroundColor: { control: 'color' },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: { onClick: fn() },
} satisfies Meta<typeof MuiButton>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  args: {},
};

Reproduction link

https://stackblitz.com/edit/github-rxrfuy-2iqxep?file=src%2Fstories%2FMuiButton.stories.ts

Reproduction steps

1. Use a component from @mui/material package, for example Button inside a story.
2. Start storybook, open story and see the error

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (6) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.3.0-alpha.0 => 8.3.0-alpha.0 
    @storybook/addon-interactions: ^8.3.0-alpha.0 => 8.3.0-alpha.0 
    @storybook/addon-links: ^8.3.0-alpha.0 => 8.3.0-alpha.0 
    @storybook/addon-onboarding: ^8.3.0-alpha.0 => 8.3.0-alpha.0 
    @storybook/blocks: ^8.3.0-alpha.0 => 8.3.0-alpha.0 
    @storybook/react: ^8.3.0-alpha.0 => 8.3.0-alpha.0 
    @storybook/react-vite: ^8.3.0-alpha.0 => 8.3.0-alpha.0 
    @storybook/test: ^8.3.0-alpha.0 => 8.3.0-alpha.0 
    storybook: ^8.3.0-alpha.0 => 8.3.0-alpha.0

Additional context

It looks like 5.15.10 is the last version of mui that works with storybook correctly, but it's 5 months old now.

[akrynski-1]

Adding vite-plugin-commonjs does not help

[valentinpalkovic]

Hi @akrynski-1 Does it work with Storybook 8.1.11?

[akrynski-1]

Hi @valentinpalkovic, it does work with Storybook 8.1.11

[AliAlawi96]

Hi, I'm also having the same issue with storybook 8.2.1

[OddDev]

Hi, I'm also having the same issue with storybook 8.2.1

Same here!

[artaommahe]

Same error with importing a theme from react-syntax-highlighter/dist/cjs/styles/prism. Both 8.2.1 and 8.2.2 affected

TypeError: _interopRequireDefault2 is not a function
    at node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.js (index.js:273:12)

[artaommahe]

Minimal reproduction for our case with 8.2.2

https://stackblitz.com/edit/storybook-interoprequiredefault2-error?file=src%2FComponent.stories.jsx,src%2FComponent.jsx

Works fine if you comment out react-syntax-highlighter import in the Component.tsx

[spaceexperiment]

I am having the same issue, storybook v8.2.1, MUI v5.16.0.

[federico-ntr]

I'm having the same problem in development. The deployed version seems to work fine.

[damisparks]

I am having the same issue.

"storybook": "^8.2.2"

[damisparks]

Hi @akrynski-1 Does it work with Storybook 8.1.11?

Please let me know what version works for you.

My current version:

"@mui/material": "^5.15.18",
"storybook": "^8.2.2",

[ndelangen]

I'm trying to understand what is happening, that causing this to break.

I'm looking at this repro: https://stackblitz.com/edit/storybook-interoprequiredefault2-error?file=src%2FComponent.stories.jsx,src%2FComponent.jsx
(Thank you @artaommahe for supplying it!)

I'm setting a debugger at the location of the error, and it looks like what is supposed to be a function is an object with a default property on it:

When I change the CJS part of the path, it starts working:

I'm investigating still, but I'll need help from someone with deeper knowledge of vite.

[ndelangen]

OK, I found the problem. The fix will take a minute, because it's Friday evening.

[spaceexperiment]

even though this has been fixed, it isn't on the latest build yet right?

[damisparks]

@spaceexperiment it is pending its release Release: Patch 8.2.3