[Bug]: Error in component stories using Drawer component in MUI about storybook

[theutkarshdev]

Certainly! Here's a suggested best reply/solution for the reported issue on GitHub:

---

Bug Description

When attempting to use MUI's Drawer component in a Storybook story, an error occurs. This issue was observed after upgrading from Storybook 7 to Storybook 8.

To Reproduce

Repository: Drawer App

The project includes two components and their respective stories. The stories in the MyBox component, using Box, are displayed correctly. However, the stories in the MyDrawer component, using Drawer, generate the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

System Information

System:

• OS: macOS 14.2.1
• CPU: (8) arm64 Apple M1
• Shell: 5.9 - /bin/zsh

Binaries:

• Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
• npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm <----- active

Browsers:

• Chrome: 123.0.6312.59
• Edge: 123.0.2420.53

npmPackages:

• @storybook/addon-essentials: ^8.0.4
• @storybook/addon-interactions: ^8.0.4
• @storybook/addon-links: ^8.0.4
• @storybook/addon-onboarding: ^8.0.4
• @storybook/blocks: ^8.0.4
• @storybook/nextjs: ^8.0.4
• @storybook/react: ^8.0.4
• @storybook/test: ^8.0.4
• eslint-plugin-storybook: ^0.8.0
• storybook: ^8.0.4

Solution

The issue likely arises from the way the Drawer component is imported and used. To resolve this issue, ensure the correct import statement for Drawer from @mui/material:

import React from "react";
import Drawer from "@mui/material/Drawer";

export default function MyDrawer() {
  return <Drawer open>My Drawer</Drawer>;
}

Additional Notes

• This solution assumes that Drawer is a default export from @mui/material/Drawer.
• Verify that the import path is correct and that Drawer is correctly exported from the @mui/material library.
• If the issue persists, double-check the Storybook configuration and ensure compatibility with the version of MUI being used.

---

Feel free to customize this response as needed for your GitHub issue. It includes the bug description, steps to reproduce, system information, suggested solution, and additional notes to assist with resolving the issue.

[JonasDoe]

Thanks for the workarounds! I'm still hoping this gets fixed at some point - I don't really see myself rewriting/bloating our rather huge project just to make Storybook happy. :/

[garyfagan]

I'm having the same issue after updating to version 8.

[zigang93]

I think not only drawer had the issue, InputBase also facing same issue in storybook 8.0.5

I had to manually change to default import to solve:

From:

import {
  Drawer,
  InputBase
} from '@mui/material'

To:

import Drawer from '@mui/material/Drawer'
import InputBase from '@mui/material/InputBase'

[valentinpalkovic]

Hi @sunvisor

Thank you for sharing your issue!

I have a guess what the root cause might be, and I would like to ask you to try something out:

Could you please opt-out for react-docgen-typescript?
In Storybook 8, we changed the default component analysis tool from react-docgen-typescript to react-docgen. We got a lot of reports that, in some edge cases, the analysis tool doesn't extract component information properly and even leads to breaking stories.

You can read about this in the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default

I want to try out, whether the error disappears if you use the former default react-docgen-typescript. For that, go to your .storybook/main.js|ts file and configure the following:

export default {
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
};

[JonasDoe]

@valentinpalkovic
Thank you for the response! Speaking for me, switching back to react-docgen-typecript didn't fix the behavior. But maybe somebody else test it, too ... just in case there's something else in my config which screws up.

[sunvisor]

Hi @sunvisor

Thank you for sharing your issue!

I have a guess what the root cause might be, and I would like to ask you to try something out:

Could you please opt-out for react-docgen-typescript? In Storybook 8, we changed the default component analysis tool from react-docgen-typescript to react-docgen. We got a lot of reports that, in some edge cases, the analysis tool doesn't extract component information properly and even leads to breaking stories.

You can read about this in the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default

I want to try out, whether the error disappears if you use the former default react-docgen-typescript. For that, go to your .storybook/main.js|ts file and configure the following:

export default {
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
};

Thank you.
I have tried your suggestion.
But the result is not good.
I get exactly the same error.

[sunvisor]

@theutkarshdev

Thanks.
Indeed, I changed the import statement as you suggested and the error no longer occurs.
Now I am wondering if I should modify my code to accommodate or wait for storybook to improve and upgrade to version 8.
Anyway, thanks for sharing your solution.