[Bug]: including requirejs into storybook head breaks tocbot
#31082 opened on Apr 7, 2025
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:
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
Reproduction steps
- Go to above linke
- Open console
- See error :
tocbot.init() is not a function - Test without requirejs ( comment out the preview-head.html )
- 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.