Bug: editorState undefined on load

[k-borley]

Everything is set up the way it is in the documentation. The playground story renders correctly for a second but then crashes with this error. I am on Storybook 7.2.0 with React 16.9.0 and Webpack 5

Panel.tsx:83 Uncaught TypeError: Cannot read properties of undefined (reading 'undefined')
    at Panel.tsx:83:13
    at updateMemo (chunk-SJD7EFYL.js:69:12591)
    at Object.useMemo (chunk-SJD7EFYL.js:69:23917)
    at useMemo (chunk-DP4DR4LA.js:9:1378)
    at Rxe (Panel.tsx:81:30)
    at renderWithHooks (chunk-SJD7EFYL.js:69:936)
    at updateFunctionComponent (chunk-SJD7EFYL.js:69:48263)
    at beginWork (chunk-SJD7EFYL.js:71:21338)
    at HTMLUnknownElement.callCallback2 (chunk-SJD7EFYL.js:2:1918)
    at Object.invokeGuardedCallbackDev (chunk-SJD7EFYL.js:2:2442)
chunk-SJD7EFYL.js:75 The above error occurred in the <Rxe> component:
    in Rxe
    in div (created by Styled(div))
    in Styled(div)
    in div (created by Styled(div))
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel2)
    in Panel2 (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by ToggleVisibility)
    in ToggleVisibility (created by QueryLocation)
    in QueryLocation (created by QueryMatch)
    in QueryMatch (created by Route)
    in Route (created by Layout)
    in div (created by ToggleVisibility)
    in ToggleVisibility (created by QueryLocation)
    in QueryLocation (created by QueryMatch)
    in QueryMatch (created by Route)
    in Route (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Main)
    in div (created by Styled(div))
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by WithTheme(Layout))
    in WithTheme(Layout)
    in Unknown (created by App)
    in div (created by Styled(div))
    in Styled(div) (created by App)
    in App
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by QueryLocation)
    in QueryLocation (created by Main2)
    in Main2 (created by Root4)
    in Router (created by LocationProvider)
    in LocationProvider (created by Root4)
    in HelmetProvider (created by Root4)
    in Root4```

[YossiSaadi]

Everything is set up the way it is in the documentation. The playground story renders correctly for a second but then crashes with this error. I am on Storybook 7.2.0 with React 16.9.0 and Webpack 5

Panel.tsx:83 Uncaught TypeError: Cannot read properties of undefined (reading 'undefined')
    at Panel.tsx:83:13
    at updateMemo (chunk-SJD7EFYL.js:69:12591)
    at Object.useMemo (chunk-SJD7EFYL.js:69:23917)
    at useMemo (chunk-DP4DR4LA.js:9:1378)
    at Rxe (Panel.tsx:81:30)
    at renderWithHooks (chunk-SJD7EFYL.js:69:936)
    at updateFunctionComponent (chunk-SJD7EFYL.js:69:48263)
    at beginWork (chunk-SJD7EFYL.js:71:21338)
    at HTMLUnknownElement.callCallback2 (chunk-SJD7EFYL.js:2:1918)
    at Object.invokeGuardedCallbackDev (chunk-SJD7EFYL.js:2:2442)
chunk-SJD7EFYL.js:75 The above error occurred in the <Rxe> component:
    in Rxe
    in div (created by Styled(div))
    in Styled(div)
    in div (created by Styled(div))
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel2)
    in Panel2 (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by ToggleVisibility)
    in ToggleVisibility (created by QueryLocation)
    in QueryLocation (created by QueryMatch)
    in QueryMatch (created by Route)
    in Route (created by Layout)
    in div (created by ToggleVisibility)
    in ToggleVisibility (created by QueryLocation)
    in QueryLocation (created by QueryMatch)
    in QueryMatch (created by Route)
    in Route (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Main)
    in div (created by Styled(div))
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by WithTheme(Layout))
    in WithTheme(Layout)
    in Unknown (created by App)
    in div (created by Styled(div))
    in Styled(div) (created by App)
    in App
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by QueryLocation)
    in QueryLocation (created by Main2)
    in Main2 (created by Root4)
    in Router (created by LocationProvider)
    in LocationProvider (created by Root4)
    in HelmetProvider (created by Root4)
    in Root4```

Hey @k-borley, thanks for reporting!

Can you please share which version of the addon are you using? is it the latest?

I've just released a new version, mind checking?
I wasn't able to reproduce with either the latest or before that, the state var has default initialization, so it should never fail basically and become undefined.

If the new version won't work I would love to get some reproduction, and maybe I'll add a check there before accessing editorState

[k-borley]

Thanks for the quick response! I was using v1.8.0. Sadly I'm still encountering the error with v1.9.0.

When I step through with the debugger, I have editorState = { jsx: null, css: null }, selectedTab: 'jsx', hasInitialCodeLoaded: false. As soon as hasInitialCodeLoaded switches to true, the other two variables become undefined, and that is when the crash happens. I've tried changing the const Playground = {} in the playground story to return jsx instead, and I've also tried with and without the introCode parameter being set.

[YossiSaadi]

Thanks for the quick response! I was using v1.8.0. Sadly I'm still encountering the error with v1.9.0.

When I step through with the debugger, I have editorState = { jsx: null, css: null }, selectedTab: 'jsx', hasInitialCodeLoaded: false. As soon as hasInitialCodeLoaded switches to true, the other two variables become undefined, and that is when the crash happens. I've tried changing the const Playground = {} in the playground story to return jsx instead, and I've also tried with and without the introCode parameter being set.

Thanks for focusing the issue @k-borley!
Can you please share the parameters usage setup you do on your preview file?

[YossiSaadi]

Hey again @k-borley
Was able to reproduce
seem to be a bug from Storybook's side that was resolved at 7.4.0 (storybookjs/storybook#23804)
please try to upgrade it and let me know 🙏🏼

[k-borley]

It works, amazing! Thanks so much @YossiSaadi