@react-theming/storybook-addon errors

[svict4]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using Material-UI v5 within Storybook v6.2.5, using the <Grid> component errors:

ReferenceError: values is not defined

ReferenceError: values is not defined
    at up (eval at result (http://localhost:6006/vendors~main.iframe.bundle.js:228710:17), <anonymous>:1:34)
    at Object.up (http://localhost:6006/vendors~main.iframe.bundle.js:228711:18)
    at http://localhost:6006/vendors~main.iframe.bundle.js:15581:49
    at Array.reduce (<anonymous>)
    at createEmptyBreakpointObject (http://localhost:6006/vendors~main.iframe.bundle.js:15580:224)
    at styleFunctionSx (http://localhost:6006/vendors~main.iframe.bundle.js:16553:116)
    at http://localhost:6006/vendors~main.iframe.bundle.js:13142:91
    at handleInterpolation (http://localhost:6006/vendors~main.iframe.bundle.js:3090:24)
    at serializeStyles (http://localhost:6006/vendors~main.iframe.bundle.js:3221:15)
    at http://localhost:6006/vendors~main.iframe.bundle.js:3583:108

Expected Behavior 🤔

The <Grid> component on v5 should not error within Storybook.

Steps to Reproduce 🕹

Steps:

1. Checkout https://github.com/svict4/storybook-mui-grid (codesandbox ratelimited me when trying to import)
2. Run yarn storybook
3. Observe that the Design System/Organisms/Broken story returns the above stack trace on a simple <Grid> component
4. Observe that the Design System/Organisms/Working story, which uses <Box> works fine

Context 🔦

I'm building an application based off create-react-app with MUIv5 with storybook providing a shareable design system.

I think this is likely related to #24282. I tried the fix in #24282 (comment) which results in other components (such as Box) to have the same error.

It could well be how I've implemented ThemeProvider for storybook, or how i've created the custom theme, but I think I'm following other people's implementation correctly.

Your Environment 🌎

`npx @material-ui/envinfo`

Using Google Chrome | 89.0.4389.114 (Official Build) (64-bit) (cohort: Stable)

  System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 2.4.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.114
    Edge: Spartan (44.19041.906.0), Chromium (89.0.774.68)
  npmPackages:
    @emotion/react: ^11.1.5 => 11.1.5
    @emotion/styled: ^11.1.5 => 11.1.5
    @material-ui/core: ^5.0.0-alpha.27 => 5.0.0-alpha.27
    @material-ui/icons: ^5.0.0-alpha.27 => 5.0.0-alpha.27
    @material-ui/lab: ^5.0.0-alpha.27 => 5.0.0-alpha.27
    @material-ui/pickers: ^3.3.10 => 3.3.10
    @material-ui/styled-engine:  5.0.0-alpha.25
    @material-ui/styles:  5.0.0-alpha.27
    @material-ui/system: ^5.0.0-alpha.27 => 5.0.0-alpha.27
    @material-ui/types:  5.1.7
    @material-ui/unstyled:  5.0.0-alpha.27
    @material-ui/utils:  5.0.0-alpha.27
    @types/react: ^17.0.0 => 17.0.3
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.2.3 => 4.2.3

[oliviertassinari]

Did you find a solution?

[oliviertassinari]

I had a look at the issue. The issue is with:

import { withThemes } from '@react-theming/storybook-addon';

For a reason I fail to understand (iframe communication security?), the theme is going through a serialization process that doesn't support functions: storybookjs/telejson#16. So you have to serialize something else. 'light',"dark" might be enough.
AFAIK, we can't solve this at the level of Material-UI.

[andywhite37]

Just noting that I'm running into this problem too with react-theming/storybook-addon with storybook 6.2.9 and MUI v5. I also don't understand what's going on but it seems to be that functions are being hijacked and serialized via telejson, but fail to execute on the other end.

The problem I'm running into is that the theme functions like spacing are being serialized as strings, then eval'd and (attempted to be) executed on the other end, but many of these functions are not able to be serialized and executed, as they reference symbols outside the bodies of the functions. E.g. the spacing function references the transform function from createSpacing, but this transform function is not known in the serialized version of spacing.

telejson seems to be a bad implementation and not something that should be used, but this is a storybook problem :(

[andywhite37]

We've chatted in the other thread (storybookjs/telejson#16), but from what I understand, I wouldn't classify this as an MUI bug - it's more an issue with storybook addon(s) - though it's not yet clear exactly which one(s). @react-theming/storybook-addon is making the issue surface, I think the problem is in a lower-level iframe communication addon.