-
Notifications
You must be signed in to change notification settings - Fork 29
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not work for function #16
Comments
I'm facing the same issue: https://codesandbox.io/s/floral-sea-bo4gk?file=/src/App.tsx. I noticed it in mui/material-ui#25677. import { stringify, parse } from "telejson";
import { createTheme } from "@material-ui/core";
const stringified = stringify(createTheme());
const parsed = parse(stringified);
console.log("parsed", parsed.breakpoints.up("sm"));
export default function App() {
return null;
} |
I'm having lots of issues with The problem is that the MUI theme functions are not serializable in the way that telejson is naively serializing them, so they can't be stringified, parsed and executed. Is there any way to disable whatever is doing this in storybook? The components render fine on their own, but something is hijacking the function calls and messing things up. |
I have been wondering if either we could solve this problem directly in the theme's level of Material-UI. I couldn't envision any. solution. |
Yeah, I think the core issue is whatever is using telejson to try to serialize the theme, presumably to send the theme through an iframe postmessage. It appears that I don't think trying to modify the MUI theme to address this should be the fix - I think the problem is using a bad and seemingly unnecessary serialization of the theme in one of these addons. I think you suggested this in another thread, but I think if the theme switcher can pass a serializable identifier through the iframe message (e.g. a theme name or index), rather than serializing the entire theme, that would be the best solution. I don't want to denigate this |
@andywhite37 using
|
I've run into the same error and stumbled across this issue. Unlike others, I am using a custom Is there any news on this? How is |
@Looky1173 are you able to share this solution? |
@tlmader - I think serializing the theme that way would only work if the theme only contains JSON-friendly values, like strings, numbers, booleans, array, etc. I don't think it would work for an MUI theme which contains functions in the theme itself. |
@austinmccalley I've scrapped my original hideous workaround and ended up doing nearly the same thing as @tlmader: .storybook/preview.js import { withThemesProvider } from 'themeprovider-storybook';
import { ThemeProvider } from 'styled-components';
const themes = []; // Your array of themes
/*
* Serialize and deserialize theme to work around `values is not defined` error.
* (Credit: https://github.com/storybookjs/telejson/issues/16#issuecomment-878359101)
*/
function customProvider({ theme, children }) {
const serialTheme = JSON.parse(JSON.stringify(theme));
const newTheme = customCreateThemeFunction(serialTheme); // This custom function returns a theme object
return <ThemeProvider theme={newTheme}>{children}</ThemeProvider>;
}
export const decorators = [withThemesProvider(themes, { CustomThemeProvider: customProvider })]; Unfortunately it looks like this code executes on each rerender so it may slow down your storybook, especially if your (custom) ‘createTheme()’ function is expensive. |
Thanks for sharing your solution @Looky1173. It looks like MUIv5 support with Storybook is still limited and setting up a custom provider is still a little wonky right now. I won't be using Storybook until there is better support. |
I definitely agree! In fact, |
For example:
throw fun is not defined.
The text was updated successfully, but these errors were encountered: