Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Docs Addon not working in Storybook 6 with MaterialUI 5 & Emtions 11
See original GitHub issueDescribe 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® Core™ 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
Issue Analytics
- State:
- Created 2 years ago
- Reactions:12
- Comments:10 (3 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
My workaround:
In your preview.js file export the theme you want to docs addon to use.
Thanks @ofirgeller … I tried that with no success 😦 … still getting same error (empty theme and thus
theme.background.contentis undefined for content)