Conflicts with cl_server or storybook-drupal-addon?

Created on 23 January 2024, 5 months ago
Updated 28 February 2024, 4 months ago

Problem/Motivation

Last week I successfully set up the Component Library: Theme Server module β†’ and and the Storybook-Drupal Addon in preparation for use with Single Directory Components. This setup was validated using the SDC Examples β†’ module as I have no custom components developed yet.

Yesterday I discovered this module (hooray serendipity!), and have attempted to create a basic documentation page using the stories/story structure without importing any custom components. I created a colors.stories.twig file with some HTML, and used the drush command to generate a colors.stories.json.

When I visit my Storybook instance in the browser, I see my page available in the sidebar as expected, but visiting it gives me the exception "Unable to decode the story ID. Avoid tampering with the generated URL." The requested URL in the debug message above the exception appears to be correct, https://SITENAME-site.ddev.site/storybook/stories/render/_cl_server?_storyFileName=.%2Fweb%2Fthemes%2Fcustom%2FTHEMENAME%2Fdocs%2Fcolors.stories.json&_drupalTheme=THEMENAME.

When I inspect the value of $hash passed to TwigStorybook\Service::renderStory(), I get a value of "_cl_server" instead of the stories.[].parameters.server.id value in colors.stories.json.

If I re-assign $hash that parameters.server.id provides, I can bypass that exception end up with the expected HTML string as the product of `$this->environment->load($template_path)->render($context);`, but Storybook displays c is null with a stack trace indicating the storybook-drupal addon:

S@https://SITENAME-site.ddev.site:6006/vendors-node_modules_lullabot_storybook-drupal-addon_dist_preview_mjs-node_modules_storybook_-778c1a.iframe.bundle.js:20:290
_@https://SITENAME-site.ddev.site:6006/vendors-node_modules_lullabot_storybook-drupal-addon_dist_preview_mjs-node_modules_storybook_-778c1a.iframe.bundle.js:26:95
async*renderToCanvas@https://SITENAME-site.ddev.site:6006/vendors-node_modules_lullabot_storybook-drupal-addon_dist_preview_mjs-node_modules_storybook_-778c1a.iframe.bundle.js:867:1045
renderSelection/render<@https://SITENAME-site.ddev.site:6006/sb-preview/runtime.js:101:2684
...

Steps to reproduce

1. Configure a local Drupal site with CL Server and an associated Storybook instance by following its readme.
2. Install this module and grant the anonymous user permission.
3. Create a basic demo.stories.twig file in a path scanned by Storybook, and generate the JSON file for it.
4. Visit the Storybook instance and attempt to view the stories file you created.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Fixed

Version

1.0

Component

Storybook

Created by

πŸ‡ΊπŸ‡ΈUnited States akalata

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @akalata
  • πŸ‡ΊπŸ‡ΈUnited States markie Albuquerque, NM

    I can confirm that '@lullabot/storybook-drupal-addon', is the thing causing this. You just need to remove it from your .storybook/main.js and restart storybook. Now the issue with this is all your stories.yml files will bork.

  • Status changed to Fixed 5 months ago
  • e0ipso Can Picafort

    I agree with @markie. You should uninstall the addon.

  • πŸ‡΅πŸ‡ͺPeru diegoe Lima, PerΓΊ

    Just for posterity, I did some digging and this is the reason why things break:

    See the routing expectations for each drupal-side module:

    # https://git.drupalcode.org/project/cl_server/-/blob/2.x/cl_server.routing.yml
    cl_server.render:
      path: "/_cl_server"
    
    # https://git.drupalcode.org/project/storybook/-/blob/1.x/storybook.routing.yml
    storybook.render_story:
      path: /storybook/stories/render/{hash}
    

    Because `drupal/storybook` generates stories with a full `parameters.server.url` value, the `@lullabot/storybook-drupal-addon` addon will append `/_cl_server`, a _last part of the URL path_, to said URL:

    // web/themes/custom/my_theme/templates/colors.stories.json
    
    {
      "title": "Color examples",
      "parameters": {
        "server": {
          "url": "https://my-site.ddev.site/storybook/stories/render"
        }
      },
    
    // https://github.com/Lullabot/storybook-drupal-addon/blob/main/src/fetchStoryHtml.ts#L46
      const fetchUrl = new URL(`${url}/_cl_server`);
    ```
    
    So, we end up with a URL that goes straight to `drupal/storybook`'s routing (despite the suspicious `/_cl_server` path):
    
    <code>
    # This is what `drupal/storybook` understands, a full base64 encoded JSON
    /storybook/stories/render/aLongBase64Hash=
    
    # This is what `drupal/cl_server` understands, a simple query string:
    /_cl_server?_storyFileName=.%2Fweb%2Fthemes%2Fcustom%2Fmy_theme%2Ftemplates%2Fcolors.stories.json&_drupalTheme=my_theme
    
    # This is what is getting requested:
    /storybook/stories/render/_cl_server?_storyFileName=.%2Fweb%2Fthemes%2Fcustom%2Fmy_theme%2Ftemplates%2Fcolors.stories.json&_drupalTheme=my_theme
    

    Since `drupal/storybook` is trying to `base64_decode()` the last part of the URL path, it tries to decode `"_cl_server"`, which doesn't work:
    https://github.com/e0ipso/twig-storybook/blob/main/src/Service/StoryRend...

    Perhaps it would be possible to have `twig-storybook` throw a more specific error if what fails is the `base64_decode()` call, like in this scenario. So that users know what "tampering with the URL" actually means in that case (?). Would you be interested in a ticket+patch for that @e0ipso?

    Overall I agree that these are simply incompatible, but if anyone cared to have them both at the same time for whatever reason, then the fix is to edit your generated `.stories.json` files to point to a URL that makes sense for `@lullabot/storybook-drupal-addon`.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024