search

Lullabot / storybook-drupal-addon

Storybook addon to facilitate integrating Storybook with Drupal projects.
MIT License
39 stars 7 forks source link

Error: Cannot read properties of undefined (reading 'replace') #44

Open medanoune opened 7 months ago

medanoune commented 7 months ago

After following the steps described in this documentation , I encountered the following error:

Cannot read properties of undefined (reading 'replace')

TypeError: Cannot read properties of undefined (reading 'replace')
    at S (http://drupal10.ddev.site:6007/vendors-node_modules_lullabot_storybook-drupal-addon_dist_preview_mjs-node_modules_storybook_-9689e6.iframe.bundle.js:20:418)
    at renderToCanvas (http://drupal10.ddev.site:6007/vendors-node_modules_lullabot_storybook-drupal-addon_dist_preview_mjs-node_modules_storybook_-9689e6.iframe.bundle.js:984:1045)
    at StoryRender.renderToScreen (http://drupal10.ddev.site:6007/sb-preview/runtime.js:101:2702)
    at http://drupal10.ddev.site:6007/sb-preview/runtime.js:81:10850
    at StoryRender.runPhase (http://drupal10.ddev.site:6007/sb-preview/runtime.js:81:8772)
    at StoryRender.render (http://drupal10.ddev.site:6007/sb-preview/runtime.js:81:10783)
arnalyse commented 6 months ago

I'm running into the same error. I've also tried to setup storybook completely fresh (version 7.5.3) and switching to the Dev-Branch of for CL-Server (`cl_server:2.x-dev@dev').

@e0ipso, maybe you can help us out or point in any direction?

The error for me reads: 

Cannot read properties of undefined (reading 'replace')
TypeError: Cannot read properties of undefined (reading 'replace')
    at S (http://localhost:6006/vendors-node_modules_lullabot_storybook-drupal-addon_dist_preview_mjs-node_modules_storybook_-9689e6.iframe.bundle.js:20:418)
    at renderToCanvas (http://localhost:6006/vendors-node_modules_lullabot_storybook-drupal-addon_dist_preview_mjs-node_modules_storybook_-9689e6.iframe.bundle.js:984:1045)
    at StoryRender.renderToScreen (http://localhost:6006/sb-preview/runtime.js:101:2702)
    at http://localhost:6006/sb-preview/runtime.js:81:10850
    at StoryRender.runPhase (http://localhost:6006/sb-preview/runtime.js:81:8772)
    at StoryRender.render (http://localhost:6006/sb-preview/runtime.js:81:10783)

The only notice I got was when requiring @lullabot/storybook-drupal-addon . But I checked: the packages are installed, in the respective version 7.5.3

➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ BOE@workspace:. doesn't provide @storybook/components (p05ccf), requested by @lullabot/storybook-drupal-addon.
➤ YN0002: │ BOE@workspace:. doesn't provide @storybook/core-events (p455de), requested by @lullabot/storybook-drupal-addon.
➤ YN0002: │ BOE@workspace:. doesn't provide @storybook/manager-api (p04c08), requested by @lullabot/storybook-drupal-addon.
➤ YN0002: │ BOE@workspace:. doesn't provide @storybook/preview-api (p39d6c), requested by @lullabot/storybook-drupal-addon.
➤ YN0002: │ BOE@workspace:. doesn't provide @storybook/theming (pfff32), requested by @lullabot/storybook-drupal-addon.
➤ YN0002: │ BOE@workspace:. doesn't provide @storybook/types (pc7ca1), requested by @lullabot/storybook-drupal-addon.
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.

I looked into the sourcecode for the storybook-addon and can see that it failed in the replace() in fetchStoryHtml. But that's all I could find out :(

e0ipso commented 5 months ago

I set this up yesterday and I didn't run into this. This typically happens when Drupal is not rendering the component correctly because of permissions, or CORS, or any other module interactions (like require_login, etc.).

In these cases the devtools will show an error on the /_cl_server URL, try to open it to see if you get an error.

If you succeed, could you open a PR to add debugging tips to README.md?

arnalyse commented 5 months ago

🤦 … sigh

The cause of all my pain was: storybook didn't know my server url, because I messed up the preview.js: 

// 🔥🔥🔥 WRONG 
const preview = {
    parameters: {
        // …
    },
    server: {
        // Replace this with your Drupal site URL, or an environment variable.
        url: 'http://127.0.0.1:8080',
    },
};

// 😎😎😎 RIGHT
const preview = {
    parameters: {
        server: {
            // Replace this with your Drupal site URL, or an environment variable.
            url: 'http://127.0.0.1:8080',
        },
    }
};

@medanoune : please check your preview.js.

Short explanation of this error: when the server with its url property isn't passed correctly as a parameter everything breaks, because url is not set, and a replace() on it fails hard.

@e0ipso : after all the hours I've sunken into this I'll gladly provide some debugging tips. May take until the end of the week, but I'll definitely do the PR.

e0ipso commented 5 months ago

That would be fantastic @arnalyse !!

ioulian commented 3 months ago

/_cl_server

This fixed it for me! Thanks