storybook: MUI5 and storybook mixes the `theme` if rendering Docs - which cause an exception

Describe the bug Material 5 (https://mui.com/core/) uses emotion to style its components. This clashes with storybook and the storybook theme pollutes and wipes out the MUI theme.

To Reproduce

Checkout https://github.com/uwinkler/storybook-problem Execute yarn && yarn run storybook Go to a ‘Doc’ page

See screenshot

System System: OS: macOS 11.5.2 CPU: (16) x64 Intel® Core™ i9-9900K CPU @ 3.60GHz Binaries: Node: 16.3.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.15.1 - /usr/local/bin/npm Browsers: Firefox: 91.0 Safari: 14.1.2 npmPackages: @storybook/addon-actions: ^6.3.8 => 6.3.8 @storybook/addon-essentials: ^6.3.8 => 6.3.8 @storybook/addon-links: ^6.3.8 => 6.3.8 @storybook/node-logger: ^6.3.8 => 6.3.8 @storybook/preset-create-react-app: ^3.2.0 => 3.2.0 @storybook/react: ^6.3.8 => 6.3.8 Additional context

Add any other context about the problem here

. Screenshot 2021-09-18 at 14 51 35

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 19
Comments: 29 (11 by maintainers)

Commits related to this issue

switch to next beta of storybook to workaround https://github.com/storybookjs/storybook/issues/16099 — committed to IPG-Automotive-UK/react-ui by dmbarry86 3 years ago

Most upvoted comments

@shilman finally the below solution is worked for me now.

Removing aliases in .storybook/main.js like below

module.exports = {
  stories: [
    '../src/**/**.stories.mdx',
    '../src/**/**.stories.@(js|jsx|ts|tsx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal(config) {
    delete config.resolve.alias['emotion-theming'];
    delete config.resolve.alias['@emotion/styled'];
    delete config.resolve.alias['@emotion/core'];
    return config;
  },
};

+41

samuel-joyson on Oct 26, 2021

Also experiencing this issue. None of the suggested workarounds fix the issue for me.

maxquinn on Sep 23, 2021

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.31 containing PR #16613 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

shilman on Nov 9, 2021

Thanks @uwinkler--I’ll take a look today 🙏

shilman on Sep 19, 2021

There are a few different possible workarounds:

Disable docs https://storybook.js.org/docs/react/essentials/introduction#disabling-addons
Render docs in iframe mode (docs: { inlineStories: false }): https://storybook.js.org/docs/react/writing-docs/doc-blocks#inline-rendering
Try out a possible fix in 6.4:

npx sb@next upgrade --prerelease

Then in .storybook/main.js set:

module.exports = {
  features: { modernInlineRendering: true }
};

shilman on Sep 18, 2021

Invalid build with vite.

Does anyone solve this problem with "storybook-builder-vite": "^0.1.3" ?

Angry-Sparrow on Oct 27, 2021

Here’s a solution that’s better but experimental. cc @ndelangen @tmeasday

upgrade to the latest 6.4-beta:

npx sb@next upgrade --prerelease

enable the modernInlineRender feature flag in .storybook/main.js

module.exports = {
  features: { modernInlineRender: true }
}

I tried it out on @uwinkler 's reproduction here:

https://github.com/shilman/sb-mui5-modern-inline-render

shilman on Oct 23, 2021

Also experiencing this issue. Looking forward for some kind of fix. Thank you!

isasenth on Oct 8, 2021

The repro is here: https://github.com/uwinkler/storybook-16099-issue

You can reproduce the problem yourself:

Try to add material-ui: yarn add @mui/material @emotion/react @emotion/styled
Add a <Button/> to the introduction.stories.mdx file: https://mui.com/getting-started/usage/

This should trigger some problems

Thxs again for your help. This is much appreciated.

uwinkler on Sep 19, 2021

Nice one @samuel-joyson!! cc @tooppaaa @ndelangen

shilman on Oct 26, 2021

@samuel-joyson i can confirm your new reproduction looks ok but throws an exception. thanks for creating it!

shilman on Oct 26, 2021

hey @shilman please find the link to the repo

https://github.com/samuel-joyson/storybook-mui-issue

reply to: https://github.com/storybookjs/storybook/issues/16099#issuecomment-950292818

samuel-joyson on Oct 24, 2021

@samuel-joyson we’ll do our best to get a solution in 6.5 but don’t get your hopes up. It’s a breaking change to storybook so the earliest we can guarantee a solution is 7.0

shilman on Oct 23, 2021