Docs Addon not working in Storybook 6 with MaterialUI 5 & Emtions 11

[Tri4Ty]

Describe the bug I have a themed storybook, all my components are themed properly, but when I click on the 'Docs' tab, I get "TypeError: Cannot read property 'content' of undefined" error (essentially theme is an empty object in the following code from DocsPage.js, thus throwing the above error due to theme.background.content being undefined):

DocsPage.tsx

export const DocsWrapper = styled.div<{}>(({ theme }) => ({
  background: theme.background.content,
  display: 'flex',
  justifyContent: 'center',
  padding: '4rem 20px',
  minHeight: '100vh',
  boxSizing: 'border-box',

  [`@media (min-width: ${breakpoint}px)`]: {},
}));

Everywhere I read, there are issues with Emotion 11 and Storybook (Material UI 5 forces you to install Emotion 11 while Storybook is referencing Emotion 10) ... I'm guessing this is the source of the issue, but I cannot resolve it despite all the recommendations on StackOverflow and issues/comments/suggestions in this Storybook GitHub repo

To Reproduce

package.json

    "peerDependencies": {
        "react": "^17.0.2"
    },
    "devDependencies": {
        "@babel/core": "^7.15.0",
        "@storybook/addon-a11y": "^6.3.7",
        "@storybook/addon-actions": "^6.3.7",
        "@storybook/addon-essentials": "^6.3.7",
        "@storybook/addon-links": "^6.3.7",
        "@storybook/addons": "^6.3.7",
        "@storybook/react": "^6.3.7",
        "@storybook/theming": "^6.3.7",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "@types/jest": "^25.1.4",
        "@types/node": "^12.12.38",
        "@types/react": "^17.0.17",
        "@types/react-dom": "^17.0.9",
        "@typescript-eslint/eslint-plugin": "^4.29.1",
        "@typescript-eslint/parser": "^4.29.1",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.2.2",
        "cross-env": "^7.0.3",
        "eslint": "^7.29.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-react": "^7.24.0",
        "eslint-plugin-react-hooks": "^4.2.0",
        "eslint-plugin-simple-import-sort": "^7.0.0",
        "gh-pages": "^3.2.3",
        "husky": "^4.2.3",
        "lint-staged": "^11.1.2",
        "microbundle-crl": "^0.13.11",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.3.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "^4.0.3",
        "storybook-addon-designs": "^6.0.1",
        "typescript": "^4.3.5"
    },
    "dependencies": {
        "@emotion/react": "^11.4.1",
        "@emotion/styled": "^11.3.0",
        "@material-ui/core": "^5.0.0-beta.3",
        "@material-ui/icons": "^5.0.0-beta.1"
    },

.storybook/main.js

module.exports = {
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "storybook-addon-designs",
        "@storybook/addon-actions",
        "@storybook/addon-a11y"
    ],
    /**
     * The following webpack config overrides have been put in place to address a Storybook bug where
     * it utilizes it's own version of emotion rather than the installed one ... this was causing
     * Material UI theming not to be applied.
     * Reference Ticket: https://github.com/mui-org/material-ui/issues/24282
     * Suggested Solution: https://github.com/mui-org/material-ui/issues/24282#issuecomment-830696771
     */
    webpackFinal: async (config) => {
        return {
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    "@emotion/core": require.resolve("@emotion/react"),
                    "@emotion/styled": require.resolve("@emotion/styled"),
                    "emotion-theming": require.resolve("@emotion/react")
                }
            }
        };
    }
};

.storybook/preview.js

import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { withDesign } from "storybook-addon-designs";

import theme from "../src/resources/theme";

export const decorators = [
    (Story) => (
        <ThemeProvider theme={createTheme(theme)}>
            <Story />
        </ThemeProvider>
    ),
    withDesign
];

System System: OS: macOS 11.4 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 14.17.3 - /usr/local/bin/node npm: 6.14.13 - /usr/local/bin/npm Browsers: Chrome: 92.0.4515.159 Firefox: 90.0.2 Safari: 14.1.1 npmPackages: @storybook/addon-a11y: ^6.3.7 => 6.3.7 @storybook/addon-actions: ^6.3.7 => 6.3.7 @storybook/addon-essentials: ^6.3.7 => 6.3.7 @storybook/addon-links: ^6.3.7 => 6.3.7 @storybook/addons: ^6.3.7 => 6.3.7 @storybook/react: ^6.3.7 => 6.3.7 @storybook/theming: ^6.3.7 => 6.3.7

[ofirgeller]

My workaround:

In your preview.js file export the theme you want to docs addon to use.

import { themes } from '@storybook/theming';

export const parameters = {
 // add this 
  docs: {
    theme: themes.light,
  },

  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

[Tri4Ty]

export const parameters = { // add this docs: { theme: themes.light, },

actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, };

Thanks @ofirgeller ... I tried that with no success :( ... still getting same error (empty theme and thus theme.background.content is undefined for content)

DocsPage.js:45 Uncaught (in promise) TypeError: Cannot read property 'content' of undefined
    at DocsPage.js:45
    at handleInterpolation (emotion-serialize.browser.esm.js:137)
    at Module.serializeStyles (emotion-serialize.browser.esm.js:251)
    at emotion-styled-base.browser.cjs.js:119
    at emotion-element-99289b21.browser.esm.js:35
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
(anonymous) @ DocsPage.js:45
handleInterpolation @ emotion-serialize.browser.esm.js:137
serializeStyles @ emotion-serialize.browser.esm.js:251
(anonymous) @ emotion-styled-base.browser.cjs.js:119
(anonymous) @ emotion-element-99289b21.browser.esm.js:35
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
renderDocs @ StoryRenderer.js:462
_callee2$ @ StoryRenderer.js:258
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderStoryIfChanged @ StoryRenderer.js:290
_callee$ @ StoryRenderer.js:160
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderCurrentStory @ StoryRenderer.js:174
(anonymous) @ StoryRenderer.js:87
(anonymous) @ index.js:168
handleEvent @ index.js:167
handler @ index.js:93
emit @ index.js:100
setSelection @ story_store.js:961
(anonymous) @ story_store.js:303
(anonymous) @ index.js:168
handleEvent @ index.js:167
(anonymous) @ index.js:52
handler @ index.js:89
handleEvent @ index.js:258
Promise.then (async)
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderCurrentStory @ StoryRenderer.js:174
(anonymous) @ StoryRenderer.js:87
(anonymous) @ index.js:168
handleEvent @ index.js:167
handler @ index.js:93
emit @ index.js:100
setSelection @ story_store.js:961
(anonymous) @ story_store.js:303
(anonymous) @ index.js:168
handleEvent @ index.js:167
(anonymous) @ index.js:52
handler @ index.js:89
handleEvent @ index.js:258
postMessage (async)
(anonymous) @ vendors~main.manager.bundle.js:41799
send @ vendors~main.manager.bundle.js:41797
handler @ vendors~main.manager.bundle.js:20969
emit @ vendors~main.manager.bundle.js:20979
emit @ vendors~main.manager.bundle.js:14777
(anonymous) @ vendors~main.manager.bundle.js:39397
invokePassiveEffectCreate @ vendors~main.manager.bundle.js:114572
callCallback @ vendors~main.manager.bundle.js:95035
invokeGuardedCallbackDev @ vendors~main.manager.bundle.js:95084
invokeGuardedCallback @ vendors~main.manager.bundle.js:95146
flushPassiveEffectsImpl @ vendors~main.manager.bundle.js:114659
unstable_runWithPriority @ vendors~main.manager.bundle.js:124369
runWithPriority$1 @ vendors~main.manager.bundle.js:102366
flushPassiveEffects @ vendors~main.manager.bundle.js:114532
performSyncWorkOnRoot @ vendors~main.manager.bundle.js:113354
(anonymous) @ vendors~main.manager.bundle.js:102417
unstable_runWithPriority @ vendors~main.manager.bundle.js:124369
runWithPriority$1 @ vendors~main.manager.bundle.js:102366
flushSyncCallbackQueueImpl @ vendors~main.manager.bundle.js:102412
flushSyncCallbackQueue @ vendors~main.manager.bundle.js:102399
scheduleUpdateOnFiber @ vendors~main.manager.bundle.js:112978
enqueueSetState @ vendors~main.manager.bundle.js:103557
push../node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.manager.bundle.js:120623
(anonymous) @ vendors~main.manager.bundle.js:3281
requestAnimationFrame (async)
(anonymous) @ vendors~main.manager.bundle.js:3279
Promise.then (async)
(anonymous) @ vendors~main.manager.bundle.js:3277
(anonymous) @ vendors~main.manager.bundle.js:3094
navigate @ vendors~main.manager.bundle.js:3093
onClick @ vendors~main.manager.bundle.js:3661
callCallback @ vendors~main.manager.bundle.js:95035
invokeGuardedCallbackDev @ vendors~main.manager.bundle.js:95084
invokeGuardedCallback @ vendors~main.manager.bundle.js:95146
invokeGuardedCallbackAndCatchFirstError @ vendors~main.manager.bundle.js:95160
executeDispatch @ vendors~main.manager.bundle.js:99333
processDispatchQueueItemsInOrder @ vendors~main.manager.bundle.js:99365
processDispatchQueue @ vendors~main.manager.bundle.js:99378
dispatchEventsForPlugins @ vendors~main.manager.bundle.js:99389
(anonymous) @ vendors~main.manager.bundle.js:99598
batchedEventUpdates$1 @ vendors~main.manager.bundle.js:113481
batchedEventUpdates @ vendors~main.manager.bundle.js:94835
dispatchEventForPluginEventSystem @ vendors~main.manager.bundle.js:99597
attemptToDispatchEvent @ vendors~main.manager.bundle.js:97095
dispatchEvent @ vendors~main.manager.bundle.js:97014
unstable_runWithPriority @ vendors~main.manager.bundle.js:124369
runWithPriority$1 @ vendors~main.manager.bundle.js:102366
discreteUpdates$1 @ vendors~main.manager.bundle.js:113498
discreteUpdates @ vendors~main.manager.bundle.js:94846
dispatchDiscreteEvent @ vendors~main.manager.bundle.js:96979
Show 23 more frames

[UmairB]

What's happening with this issue? I have the same problem

[ghost]

I am also in the process of moving to MaterialUI 5 and have encountered the same problem and would like to know if there is anything being done about it.

[shilman]

Does somebody have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

Also, please upvote the issue by clicking 👍 under the original description

[isenaz]

@shilman Thank you for your response. I'm assuming this is the same issue as mentioned here: #16099 and there's a reporoduction repo in that issue: https://github.com/uwinkler/storybook-16099-issue

Thank you for your help. This is much appreciated.

[shilman]

@isasenth I don't think this is the same issue as #16099, though it's possible that reproduction also demonstrates this issue. I haven't checked yet.

[RussMax783]

Just tried @ofirgeller solution and it worked. (adding the docs: { theme: themes.light, }, to the preview file.

I'm using the storybook-builder-vite builder though instead of the webpack version.

I installed/uninstalled tons of different versions and this change work on "@storybook/react": "^6.3.0",

[shilman]

closing as dupe of #16099

[Tri4Ty]

Thanks everyone, especially @shilman for referencing the dupe. Turns out this solution resolved my issues which I originally raised this ticket for: https://github.com/storybookjs/storybook/issues/16099#issuecomment-951854953