Not passing themes to muiTheme() causes rendering errors
bareynol opened this issue · comments
As per docs, not passing any args to muiTheme() should create default light and dark themes.
Selecting the dark theme does not change the theme being used within storybook.
In addition, selecting "Full" in the Addon Panel causes the app to crash with the following errors:
VM1064:1 Uncaught ReferenceError: values is not defined
at up (eval at result (vendors~main.e871950bc4ef8d8872b2.bundle.js:125459), <anonymous>:1:32)
at Object.up (vendors~main.e871950bc4ef8d8872b2.bundle.js:125460)
at createMixins (vendors~main.e871950bc4ef8d8872b2.bundle.js:3694)
at createMuiTheme (vendors~main.e871950bc4ef8d8872b2.bundle.js:3772)
at main.1058035e48e9fd4d513b.bundle.js:488
at renderWithHooks (vendors~main.e871950bc4ef8d8872b2.bundle.js:38766)
at mountIndeterminateComponent (vendors~main.e871950bc4ef8d8872b2.bundle.js:40848)
at beginWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:41453)
at performUnitOfWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:45140)
at workLoop (vendors~main.e871950bc4ef8d8872b2.bundle.js:45180)
The above error occurred in one of your React components:
in Unknown (created by AddonPanel)
in div (created by Context.Consumer)
in ModeSection (created by AddonPanel)
in div (created by Context.Consumer)
in FlexBlock (created by AddonPanel)
in div (created by AddonPanel)
in AddonPanel (created by WithChannel(AddonPanel))
in WithChannel(AddonPanel)
in div (created by Context.Consumer)
in Styled(div)
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in _default (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout) (created by ResizeDetector)
in ResizeDetector
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown (created by ResizeDetector)
in ResizeDetector
in Unknown
in Unknown (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in Location (created by QueryLocation)
in QueryLocation (created by Root)
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root
React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
vendors~main.e871950bc4ef8d8872b2.bundle.js:8033 Uncaught ReferenceError: values is not defined
at up (eval at result (vendors~main.e871950bc4ef8d8872b2.bundle.js:125459), <anonymous>:1:32)
at Object.up (vendors~main.e871950bc4ef8d8872b2.bundle.js:125460)
at createMixins (vendors~main.e871950bc4ef8d8872b2.bundle.js:3694)
at createMuiTheme (vendors~main.e871950bc4ef8d8872b2.bundle.js:3772)
at main.1058035e48e9fd4d513b.bundle.js:488
at renderWithHooks (vendors~main.e871950bc4ef8d8872b2.bundle.js:38766)
at mountIndeterminateComponent (vendors~main.e871950bc4ef8d8872b2.bundle.js:40848)
at beginWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:41453)
at performUnitOfWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:45140)
at workLoop (vendors~main.e871950bc4ef8d8872b2.bundle.js:45180)
react_devtools_backend.js:6 The above error occurred in the <LocationProvider> component:
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
vendors~main.e871950bc4ef8d8872b2.bundle.js:46140 Uncaught ReferenceError: values is not defined
at up (eval at result (vendors~main.e871950bc4ef8d8872b2.bundle.js:125459), <anonymous>:1:32)
at Object.up (vendors~main.e871950bc4ef8d8872b2.bundle.js:125460)
at createMixins (vendors~main.e871950bc4ef8d8872b2.bundle.js:3694)
at createMuiTheme (vendors~main.e871950bc4ef8d8872b2.bundle.js:3772)
at main.1058035e48e9fd4d513b.bundle.js:488
at renderWithHooks (vendors~main.e871950bc4ef8d8872b2.bundle.js:38766)
at mountIndeterminateComponent (vendors~main.e871950bc4ef8d8872b2.bundle.js:40848)
at beginWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:41453)
at performUnitOfWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:45140)
at workLoop (vendors~main.e871950bc4ef8d8872b2.bundle.js:45180)
doing some digging into this myself. I'll see if I can fix it and submit a PR
It seems that when custom themes are passed in via .storybook/stories.js, only the object which specifies the MUI overrides are used:
import { overridings as theme1 } from './.themes/customTheme1';
import { overridings as theme2 } from './.themes/customTheme2';
import themeF3, { overridings as theme3 } from './.themes/customTheme3';
import { overridings as theme4 } from './.themes/customTheme4';
import { overridings as theme5 } from './.themes/customTheme5';
...
.addDecorator(muiTheme([theme1, theme2, theme3, theme4, theme5]))
...
overriding object can be found here: https://github.com/react-theming/storybook-addon-material-ui/blob/version-1/.storybook/.themes/customTheme1.js#L15
In the muiTheme() definition, while themes received are objects, the default lightBaseTheme and darkBaseTheme are created using createMuiTheme()
I believe this is presenting an issue in the FullTheme component and causing a crash because this component calls createMuiTheme() on the currently selected theme when sending it to the object inspector:
https://github.com/react-theming/storybook-addon-material-ui/blob/version-1/src/UI/FullTheme.js#L31
Calling createMuiTheme twice on a set of overrides causes the same error as listed above.
Removing createMuiTheme() on the default light/dark themes and adding palette: { type: 'light' } to the lightBaseTheme configuration did the following for me on a local build:
- stopped the app from crashing when selecting "full theme" in the addon panel
- fixed the default dark theme not being applied to components in storybook
I think part of my issue overall is that I was using material-ui/core v4, whereas, from what I can tell, this repo only supports Material-ui v3 (though that doesn't appear to be documented anywhere).
So it seems like this addon uses MuiThemeProvider as a decorator, and not the ThemeProvider introduced in v4.
Same observations here. Button on the right seems to imply that its v3 as well thought I wasn't sure at first. This should be documented in the README. Support for v4 would be great.
