storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.14k stars 9.25k forks source link

[Bug]: styled_default is not a function - MaterialUI Grid2 #23690

Open Vercjames opened 1 year ago

Vercjames commented 1 year ago

Describe the bug

When trying to use Material UI I am graced with the following error: styled_default is not a function.

derived from this code segment in MUI

createStyledComponent: styled_default("div", { name: "MuiGrid2", slot: "Root", overridesResolver: (props, styles) => styles.root }),

To Reproduce

  1. Create a standard storybook project.
  2. Follow the MUI installation setup.

yarn add @mui/material @emotion/react @emotion/styled yarn add @mui/material @mui/styled-engine-sc styled-components

  1. Create a Story for your Grid
    
    import React from "react"
    import Grid from "@mui/material/Unstable_Grid2/Grid2"
    import { Grid2Props } from "@mui/material/Unstable_Grid2/Grid2Props"

export const MyGrid = ({ children, ...rest }: AUIGridProps) => { return (

{children}

) }

interface AUIGridProps extends Grid2Props { children: React.ReactNode; }


### System

```shell
System:
    OS: macOS 13.4.1
    CPU: (12) arm64 Apple M2 Max
  Binaries:
    Node: 20.5.0 - ~/.nvm/versions/node/v20.5.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.0/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v20.5.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.5.2
  npmPackages:
    @storybook/addon-a11y: 7.2.0 => 7.2.0 
    @storybook/addon-docs: ^7.2.0 => 7.2.0 
    @storybook/addon-essentials: 7.2.0 => 7.2.0 
    @storybook/addon-interactions: 7.2.0 => 7.2.0 
    @storybook/addon-links: 7.2.0 => 7.2.0 
    @storybook/addon-mdx-gfm: 7.2.0 => 7.2.0 
    @storybook/addon-storyshots: 7.2.0 => 7.2.0 
    @storybook/addon-styling: ^1.3.5 => 1.3.5 
    @storybook/addons: 7.2.0 => 7.2.0 
    @storybook/blocks: 7.2.0 => 7.2.0 
    @storybook/react: 7.2.0 => 7.2.0 
    @storybook/react-vite: 7.2.0 => 7.2.0 
    @storybook/storybook-deployer: ^2.8.16 => 2.8.16 
    @storybook/testing-library: 0.2.0 => 0.2.0

Additional context

Screenshot 2023-08-02 at 12 37 48 PM

Vercjames commented 9 months ago

Still a problem using v7.6.7

ShaunEvening commented 9 months ago

Hey @Vercjames 👋

Can you share a reproduction of your issue to help me dig in?

Nurtimax commented 3 months ago
yarn vite --force

Forced re-optimization of dependencies

👍🏻