storybookjs/storybook

[Bug]: including requirejs into storybook head breaks tocbot

Open

#31082 opened on Apr 7, 2025

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

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