Problem with initialising project

Created on 4 April 2024, 8 months ago
Updated 26 June 2024, 5 months ago

Problem/Motivation

I've followed the steps in the video "Drupal & Storybook in 5 minutes". I have a Drupal 10 site, clean install with minimal, enabled the Storybook module and all the following steps. When I've created the hardcoded twig template, generated the JSON, Storybook will start, but it displays the following error:

TypeError: Failed to fetch
at defaultFetchStoryHtml (http://website.ddev.site:6007/vendors-node_modules_storybook_addon-essen...)
at renderToCanvas (http://website.ddev.site:6007/vendors-node_modules_storybook_addon-essen...)
at StoryRender.renderToScreen (http://website.ddev.site:6007/sb-preview/runtime.js:101:2684)
at http://website.ddev.site:6007/sb-preview/runtime.js:81:10850
at StoryRender.runPhase (http://website.ddev.site:6007/sb-preview/runtime.js:81:8772)
at StoryRender.render (http://website.ddev.site:6007/sb-preview/runtime.js:81:10783)

The generated JSON:
{"title":"Demo\/Examples\/Hardcoded","parameters":{"server":{"url":"http:\/\/website.ddev.site\/storybook\/stories\/render"}},"stories":[{"name":"1. Simple HTML","parameters":{"server":{"id":"eyJwYXRoIjoidHdpZy1zdG9yaWVzXC9oYXJkY29kZWQtZGVtby5zdG9yaWVzLnR3aWciLCJpZCI6InNpbXBsZV9odG1sIn0%3D"}}},{"name":"2. Using args","args":{"header":"A dynamic example","items":[{"name":"Foo","value":"Bar"}]},"parameters":{"server":{"id":"eyJwYXRoIjoidHdpZy1zdG9yaWVzXC9oYXJkY29kZWQtZGVtby5zdG9yaWVzLnR3aWciLCJpZCI6InVzaW5nX2FyZ3MifQ%3D%3D"}}}]}

I don't know what I'm doing wrong. I've tried it with Lando and this error appeared. I thought it could be lando, so I tried it with DDEV, but to no result.

I can see the Storybook interface, and I can also see the args block when I check the story with the arguments. But it won't render the story.

πŸ’¬ Support request
Status

Closed: works as designed

Version

1.0

Component

Storybook

Created by

πŸ‡³πŸ‡±Netherlands Web-Beest

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

Comments & Activities

  • Issue created by @Web-Beest
  • πŸ‡³πŸ‡±Netherlands Web-Beest
  • πŸ‡ΊπŸ‡ΈUnited States madelinelise

    Hello! Confirming I have the same issue this morning! I followed the sets in the project description and video.
    I am running with ddev if that helps, otherwise it's a relatively fresh install of Drupal 10.2.4

  • πŸ‡ΊπŸ‡ΈUnited States dgroene

    I think I had this error before doing
    drush role:perm:add anonymous 'render storybook stories'

  • πŸ‡³πŸ‡±Netherlands Web-Beest

    @dgroene:
    I've checked and rechecked, done a clean install and made sure the permissions were set. But it doesn't change anything in the outcome.

  • Status changed to Closed: works as designed 8 months ago
  • πŸ‡³πŸ‡±Netherlands Web-Beest

    I've got mine working now. I've created a new, clean setup (using Lando) and now it works. The only difference with regards to project structure is that I have created a subfolder 'drupal' like in the tutorial instead of my usual workflow. In one way or the other, it seems like Storybook couldn't find the stories in the old setup. I'll keep on checking what the difference is, but for now: it works as designed.

    Old (not working):
    /projectname/.storybook
    /projectname/.yarn
    /projectname/web
    /projectname/vendor
    /projectname/.lando.yml

    New (working):
    /projectname/drupal/.storybook
    /projectname/drupal/.yarn
    /projectname/drupal/vendor
    /projectname/drupal/web
    /projectname/.lando.yml

  • πŸ‡³πŸ‡±Netherlands Web-Beest

    Just another debug hint: check the console for errors. I've just encountered the same error with my environment that was working earlier. In my case it was a CORS error (development.services.yml was overwritten).

  • πŸ‡ΊπŸ‡ΈUnited States rwanth New York, USA

    For anyone else who makes their way here, my issue is that core-composer-scaffold was overwriting my development.services.yml file any time I added a new required package. I added the following to my composer.json to prevent this:

      "extra": {
        // ...
        "drupal-scaffold": {
          // ...
          "file-mapping": {
            "[web-root]/sites/development.services.yml": false
          }
        }
      }
    
  • πŸ‡¦πŸ‡²Armenia sergey_gabrielyan Yerevan πŸ‡¦πŸ‡²

    Hello. @Web-Beest. Is #6 the only solution? Is there another solution?

  • πŸ‡³πŸ‡±Netherlands Web-Beest

    Hi Sergei,
    No, this was eventually not the problem. The main thing was the CORS issues.

Production build 0.71.5 2024