search

whitespace-se / storybook-addon-html

A Storybook addon that extracts and displays compiled syntax-highlighted HTML
Other
95 stars 43 forks source link

`Uncaught TypeError: m.trim is not a function` in Storybook v7.1 #104

Closed maddesigns closed 5 months ago

maddesigns commented 1 year ago

I’m using your fantastic addon successfully with Storybook 7 Angular, but on Storybook 7.1 (beta) I’m getting following errors:

Uncaught TypeError: m.trim is not a function
    Ch http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:59
    renderWithHooks http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:69
    updateFunctionComponent http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:69
    beginWork http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:71
    callCallback2 http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:2
    invokeGuardedCallbackDev http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:2
    invokeGuardedCallback http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:2
    beginWork$1 http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    performUnitOfWork http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    workLoopSync http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    performSyncWorkOnRoot http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    flushSyncCallbackQueueImpl http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:9
    unstable_runWithPriority http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:1
    runWithPriority$1 http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:9
    flushSyncCallbackQueueImpl http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:9
    flushSyncCallbackQueue http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:9
    scheduleUpdateOnFiber http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    enqueueSetState http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:44
    setState http://0.0.0.0:6006/sb-manager/chunk-3FAXWWKG.js:3
    setState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:53
    newState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    setState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    setAddonState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    setState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:53
    useSharedState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:53
    sP http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:93
    handleEvent http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    handleEvent http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    Channel http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    handler http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    handleEvent http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    PostMessageTransport http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    createBrowserChannel http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    ReactProvider http://0.0.0.0:6006/sb-manager/runtime.js:1
    <anonymous> http://0.0.0.0:6006/sb-manager/runtime.js:1
manager-bundle.js:59:848

and 

Uncaught (in promise) TypeError: can't access property "languages", a is undefined
    n http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:80
    wk http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:80
    ZW http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:80
    Wk http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:90
    yn http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:92
    Mi http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:92
    D http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:93
    updateMemo http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:69
    useMemo http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:69
    useMemo http://0.0.0.0:6006/sb-manager/chunk-3FAXWWKG.js:9
    sP http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:93
    Tabs http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:220
    Tabs http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:220
    renderWithHooks http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:69
    updateFunctionComponent http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:69
    beginWork http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:71
    beginWork$1 http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    performUnitOfWork http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    workLoopSync http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    performSyncWorkOnRoot http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    flushSyncCallbackQueueImpl http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:9
    unstable_runWithPriority http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:1
    runWithPriority$1 http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:9
    flushSyncCallbackQueueImpl http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:9
    flushSyncCallbackQueue http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:9
    scheduleUpdateOnFiber http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:90
    enqueueSetState http://0.0.0.0:6006/sb-manager/chunk-BOQB7P2G.js:44
    setState http://0.0.0.0:6006/sb-manager/chunk-3FAXWWKG.js:3
    setState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:53
    newState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    setState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    setAddonState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    setState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:53
    useSharedState http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:53
    sP http://0.0.0.0:6006/sb-addons/whitespace-html-esm-preset-12/manager-bundle.js:93
    handleEvent http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    handleEvent http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    Channel http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    handler http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    handleEvent http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    PostMessageTransport http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    createBrowserChannel http://0.0.0.0:6006/sb-manager/chunk-SU7DKTZC.js:39
    ReactProvider http://0.0.0.0:6006/sb-manager/runtime.js:1
    <anonymous> http://0.0.0.0:6006/sb-manager/runtime.js:1
2 manager-bundle.js:80:692

Maybe it’s dependencies related, but I can’t find out atm what to do.

dgonzalezr commented 1 year ago

@maddesigns can you verify if you're using Prettier and which version do you have? Asking because I got the same when upgrading to Prettier v3.0.0, downgrading to Prettier v2.8.8 fixed it for me.

maddesigns commented 1 year ago

Confirmed @dgonzalezr. Works with Prettier v2.8.8 and Storybook 7.1 release.

kevintyj commented 1 year ago

I would really love to use this add-on but because of incompatibility with Prettier v3, we are unable to use it :( Any word from the maintainers if the Prettier version is planned for an update? Our team relies on some of the new features such as foreign language commenting styling and such for our team to maintain our pretty ✨ code. Awesome work from the team at @whitespace-dev! Thank you for the amazing addon.

oxilor commented 1 year ago

I have the same problem. I'm using storybook 7.2.1. Upgrading the prettier from 2.8.8 to 3 leads to the following errors:

  1. SyntaxHighlighter.js:91 Uncaught TypeError: g.trim is not a function.
  2. standalone.mjs:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'languages').
More ``` SyntaxHighlighter.js:91 Uncaught TypeError: g.trim is not a function at Eh (SyntaxHighlighter.js:91:22) 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) at invokeGuardedCallback (chunk-SJD7EFYL.js:2:3700) at beginWork$1 (chunk-SJD7EFYL.js:90:39484) at performUnitOfWork (chunk-SJD7EFYL.js:90:21018) at workLoopSync (chunk-SJD7EFYL.js:90:20642) chunk-SJD7EFYL.js:75 The above error occurred in the component: in Eh (created by UM) in UM (created by uP) in div (created by AddonPanel) in AddonPanel (created by uP) in uP 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 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. logCapturedError @ chunk-SJD7EFYL.js:75 standalone.mjs:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'languages') at standalone.mjs:22:694 at Array.flatMap () at Dk (standalone.mjs:22:681) at WW (standalone.mjs:25:11871) at jk (standalone.mjs:35:273) at standalone.mjs:37:1462 at Oi (standalone.mjs:37:1531) at Panel.js:55:20 at updateMemo (chunk-SJD7EFYL.js:69:12591) at Object.useMemo (chunk-SJD7EFYL.js:69:23917) standalone.mjs:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'languages') at standalone.mjs:22:694 at Array.flatMap () at Dk (standalone.mjs:22:681) at WW (standalone.mjs:25:11871) at jk (standalone.mjs:35:273) at standalone.mjs:37:1462 at Oi (standalone.mjs:37:1531) at Panel.js:55:20 at updateMemo (chunk-SJD7EFYL.js:69:12591) at Object.useMemo (chunk-SJD7EFYL.js:69:23917) SyntaxHighlighter.js:91 Uncaught (in promise) TypeError: g.trim is not a function at Eh (SyntaxHighlighter.js:91:22) 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) at invokeGuardedCallback (chunk-SJD7EFYL.js:2:3700) at beginWork$1 (chunk-SJD7EFYL.js:90:39484) at performUnitOfWork (chunk-SJD7EFYL.js:90:21018) at workLoopSync (chunk-SJD7EFYL.js:90:20642) chunk-SJD7EFYL.js:2 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Unknown (created by ManagerConsumer) in ManagerConsumer (created by Canvas) in Canvas in div (created by Styled(div)) in Styled(div) 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 ```

If I remove @whitespace/storybook-addon-html there are no errors.

mevbg commented 1 year ago

Downgrading to 2.8.8 doesn't always work because when I delete the /node_modules/.cache dir, Storybook is unabled to run and crashes with the following error: prettier.resolveConfig.sync is not a function

Looking forward to this getting a fix. @jeanfredrik, any plans updating this any sooner? 🙂

mikeriley131 commented 7 months ago

For anyone running into this issue, I found another plugin that seems to work just the same that does not have the same conflicts with Prettier v3.

https://storybook.js.org/addons/@un-known/storybook-addon-html