Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Does not work with Storybook 7 #1

Closed
oliveryasuna opened this issue Jan 20, 2024 · 1 comment
Closed

Does not work with Storybook 7 #1

oliveryasuna opened this issue Jan 20, 2024 · 1 comment

Comments

@oliveryasuna
Copy link

When I click on the icon added to the toolbar, the entire page turns completely white and the following errors are printed:

Uncaught TypeError: m.options is undefined
    Z http://localhost:4400/sb-addons/background-toggle-esm-preset-8/manager-bundle.js:8
    renderWithHooks http://localhost:4400/sb-manager/chunk-INSKDKQB.js:83
    mountIndeterminateComponent http://localhost:4400/sb-manager/chunk-INSKDKQB.js:83
    beginWork http://localhost:4400/sb-manager/chunk-INSKDKQB.js:85
    callCallback2 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    invokeGuardedCallbackDev http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    invokeGuardedCallback http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    beginWork$1 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    performUnitOfWork http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    workLoopSync http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    performSyncWorkOnRoot http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    flushSyncCallbackQueueImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    unstable_runWithPriority http://localhost:4400/sb-manager/chunk-INSKDKQB.js:15
    runWithPriority$1 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushSyncCallbackQueueImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushSyncCallbackQueue http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    scheduleUpdateOnFiber http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    dispatchAction http://localhost:4400/sb-manager/chunk-INSKDKQB.js:83
    onVisibilityChange http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:9
    onVisibleChange http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:9
    current http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:1
    setTimeout handler*usePopperTooltip/showTooltip< http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:1
    toggleTooltip http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:1
    usePopperTooltip http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:1
    commitHookEffectListMount http://localhost:4400/sb-manager/chunk-INSKDKQB.js:89
    commitPassiveHookEffects http://localhost:4400/sb-manager/chunk-INSKDKQB.js:102
    callCallback2 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    invokeGuardedCallbackDev http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    invokeGuardedCallback http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    flushPassiveEffectsImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    unstable_runWithPriority http://localhost:4400/sb-manager/chunk-INSKDKQB.js:15
    runWithPriority$1 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushPassiveEffects http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    performSyncWorkOnRoot http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    flushSyncCallbackQueueImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    unstable_runWithPriority http://localhost:4400/sb-manager/chunk-INSKDKQB.js:15
    runWithPriority$1 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushSyncCallbackQueueImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushSyncCallbackQueue http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    scheduleUpdateOnFiber http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    enqueueSetState http://localhost:4400/sb-manager/chunk-INSKDKQB.js:58
    setState http://localhost:4400/sb-manager/chunk-INSKDKQB.js:3
    setState http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:51
    newState http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    setState http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    init7 http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:51
    handleEvent http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    handleEvent http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    Channel http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    handler http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    handleEvent http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    PostMessageTransport http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    createBrowserChannel http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    ReactProvider http://localhost:4400/sb-manager/runtime.js:1
    <anonymous> http://localhost:4400/sb-manager/runtime.js:1
[manager-bundle.js:8:307](http://localhost:4400/sb-addons/background-toggle-esm-preset-8/manager-bundle.js)
The above error occurred in the <Z> component:
    in Z (created by te)
    in div (created by Styled(div))
    in Styled(div) (created by Tooltip)
    in Tooltip (created by WithTooltipPure)
    in WithTooltipPure (created by WithToolTipState)
    in WithToolTipState (created by WithTooltip)
    in Suspense (created by WithTooltip)
    in WithTooltip (created by te)
    in te (created by render)
    in render
    in Unknown
    in div (created by Side)
    in Side (created by FlexBar)
    in div (created by Styled(div))
    in Styled(div) (created by FlexBar)
    in div (created by UnstyledBar)
    in UnstyledBar (created by Bar)
    in Bar (created by FlexBar)
    in FlexBar (created by Bar3)
    in Bar3 (created by Styled(Bar3))
    in Styled(Bar3)
    in Unknown (created by QueryLocation)
    in QueryLocation
    in Unknown
    in ZoomProvider
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer
    in Unknown (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Preview)
    in Preview (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

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. [localhost:4400:13024:25](http://localhost:4400/?path=/story/components-iconbutton--default&globals=backgrounds.value:transparent)
Uncaught TypeError: m.options is undefined
    Z http://localhost:4400/sb-addons/background-toggle-esm-preset-8/manager-bundle.js:8
    renderWithHooks http://localhost:4400/sb-manager/chunk-INSKDKQB.js:83
    mountIndeterminateComponent http://localhost:4400/sb-manager/chunk-INSKDKQB.js:83
    beginWork http://localhost:4400/sb-manager/chunk-INSKDKQB.js:85
    callCallback2 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    invokeGuardedCallbackDev http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    invokeGuardedCallback http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    beginWork$1 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    performUnitOfWork http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    workLoopSync http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    performSyncWorkOnRoot http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    flushSyncCallbackQueueImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    unstable_runWithPriority http://localhost:4400/sb-manager/chunk-INSKDKQB.js:15
    runWithPriority$1 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushSyncCallbackQueueImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushSyncCallbackQueue http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    scheduleUpdateOnFiber http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    dispatchAction http://localhost:4400/sb-manager/chunk-INSKDKQB.js:83
    onVisibilityChange http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:9
    onVisibleChange http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:9
    current http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:1
    setTimeout handler*usePopperTooltip/showTooltip< http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:1
    toggleTooltip http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:1
    usePopperTooltip http://localhost:4400/sb-manager/chunk-NGTUFCUO.js:1
    commitHookEffectListMount http://localhost:4400/sb-manager/chunk-INSKDKQB.js:89
    commitPassiveHookEffects http://localhost:4400/sb-manager/chunk-INSKDKQB.js:102
    callCallback2 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    invokeGuardedCallbackDev http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    invokeGuardedCallback http://localhost:4400/sb-manager/chunk-INSKDKQB.js:16
    flushPassiveEffectsImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    unstable_runWithPriority http://localhost:4400/sb-manager/chunk-INSKDKQB.js:15
    runWithPriority$1 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushPassiveEffects http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    performSyncWorkOnRoot http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    flushSyncCallbackQueueImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    unstable_runWithPriority http://localhost:4400/sb-manager/chunk-INSKDKQB.js:15
    runWithPriority$1 http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushSyncCallbackQueueImpl http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    flushSyncCallbackQueue http://localhost:4400/sb-manager/chunk-INSKDKQB.js:23
    scheduleUpdateOnFiber http://localhost:4400/sb-manager/chunk-INSKDKQB.js:104
    enqueueSetState http://localhost:4400/sb-manager/chunk-INSKDKQB.js:58
    setState http://localhost:4400/sb-manager/chunk-INSKDKQB.js:3
    setState http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:51
    newState http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    setState http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    init7 http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:51
    handleEvent http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    handleEvent http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    Channel http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    handler http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    handleEvent http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    PostMessageTransport http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    createBrowserChannel http://localhost:4400/sb-manager/chunk-F4FCO4CF.js:37
    ReactProvider http://localhost:4400/sb-manager/runtime.js:1
    <anonymous> http://localhost:4400/sb-manager/runtime.js:1
@nickofthyme
Copy link
Owner

After looking into this to recall the many problems I had that led me to create this addon, one of the main issues sadly still remains unaddressed by storybook storybookjs/storybook#15632. I don't care to spend the time to update this at the moment but you are welcome to if you'd like. But before you do, I would test out https://github.com/storybookjs/storybook/tree/next/code/addons/backgrounds to see if they fixed it's many issues. If it works, I'd use that instead, even if it's less feature-rich than this addon 😞. Better yet you could contribute to that addon what's missing/broken, forcing storybook to keep it up to date.

Storybook is CONSTANTLY changing apis making it difficult to keep up to date and I've had so many things break in the past between minor updates I have not updated our storybook since v6.3.7.

If you do want to take a stab at fixing/updating this addon I would start fresh with the https://github.com/storybookjs/addon-kit template and cherrypick what you need to get the same functionality, and enjoy updating all the inputs and respective APIs to their new and likely different functionalities 😭.

@nickofthyme nickofthyme reopened this Jan 22, 2024
@nickofthyme nickofthyme closed this as not planned Won't fix, can't repro, duplicate, stale Jan 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@oliveryasuna @nickofthyme