storybookjs/storybook

[Bug]: including requirejs into storybook head breaks tocbot

Open

#31,082 opened on Apr 7, 2025

View on GitHub
 (5 comments) (1 reaction) (0 assignees)TypeScript (10,058 forks)batch import
bugcompatibility with other toolshelp wantedsev:S3

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 9d 3h) (173 merged PRs in 30d)

Description

Describe the bug

In storybook you can add other scripts or tags in the preview head html. I need requirejs in storybook for some components which need requirejs.

If I add the require lib as script to the preview tocbot generates this error: tocbot.init is not a function and does not work

I have a reproduction here:

https://stackblitz.com/edit/github-etbroh8t?file=.storybook%2Fpreview.ts,.storybook%2Fpreview-head.html

It takes you directly to the ./storybook/preview-head.html

which contains the script which references requirejs, which is needed by some of our components.

preview-head.html

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
  integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

if you comment this scrips tocboc in storybook everything works fine. else the error tocbot.init is not a function will be in the console log

Reproduction link

https://stackblitz.com/edit/github-etbroh8t?file=.storybook%2Fpreview.ts,.storybook%2Fpreview-head.html

Reproduction steps

  1. Go to above linke
  2. Open console
  3. See error : tocbot.init() is not a function
  4. Test without requirejs ( comment out the preview-head.html )
  5. No error tocbot works

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.6.12 => 8.6.12 
    @storybook/blocks: ^8.6.12 => 8.6.12 
    @storybook/test: ^8.6.12 => 8.6.12 
    @storybook/web-components: ^8.6.12 => 8.6.12 
    @storybook/web-components-vite: ^8.6.12 => 8.6.12 
    storybook: ^8.6.12 => 8.6.12

Additional context

I also tested this in a plain tocbot project with requirejs : https://stackblitz.com/edit/js-sg32eixr?file=index.js that did not break, so it seems storybook related, or at least storybook in combination with tocbot.

Contributor guide