Cannot get the module to work using the instructions

Created on 9 August 2023, over 1 year ago

Problem/Motivation

I installed the module on a D10 site (after fixing the info.yml file) and tried to follow the instructions to use it.

However, I met many errors running the commands in the README, all of which seem to suggest that there are some additional implicit requirements to meet before starting regarding project setup.

The first obvious issue is that the first JS-related instruction (npx sb init --type server) fails because it misses a package.json.

Then it complains that it does not find a builder. Trying Vite crashes the command. Trying Webpack fails later.

Adding Webpack as a dev dependency goes a bit further, failing on ESM module imports. Downpinning "string-width" to "^2", and "strip-ansi" to "^6" solves that.

But then the SB UI complains of errors without a clear link to the site like:

Cannot read properties of null (reading '1')
TypeError: Cannot read properties of null (reading '1')
    at fetchStoryHtml (http://localhost:6006/main.iframe.bundle.js:40:30)
    at renderToCanvas (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-0bc484.iframe.bundle.js:979:1045)
    at StoryRender.renderToScreen (http://localhost:6006/sb-preview/runtime.js:94:2702)
    at http://localhost:6006/sb-preview/runtime.js:74:10850
    at StoryRender.runPhase (http://localhost:6006/sb-preview/runtime.js:74:8772)
    at StoryRender.render (http://localhost:6006/sb-preview/runtime.js:74:10783)

Manually hitting the module route like http://mysite/_storybook_server?_drupal_theme=%22mytheme%22&_storybook=%22components/button/button%22 triggers "Theme hook markup not found" in DBLog and returns a page without any rendered content for the component.

Editing XSS:adminTags to include <button> at last leads to rendering the component in the page as appears to be expected:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<!-- ...snip ... -->
  <body class="markup toolbar-loading">
        <a href="#main-content" class="visually-hidden focusable">
      Skip to main content
    </a>
    
      <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas>
    <button class="button"></button>


  </div>
<!-- ...snip -->

So at that point the twig component is rendered, but :

that does not fix the SB UI
the module still logs errors about "theme hook markup not found"
we need to hack a core file just to render a button

All in all, there seems to be missing steps in the setup.

💬 Support request

Status

Active

Version

1.2

Component

Documentation

Created by

🇫🇷France fgm Paris, France

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @fgm

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024