including requirejs into storybook head breaks tocbot

[herrKlein]

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

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>

[tscanlin]

Hmm, how are you loading tocbot? Can you include / add this script after tocbot.init is called?

Also, can you post a link where you have reproduced this issue so I can see / investigate? Thanks.

[herrKlein]

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.

<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

[tscanlin]

hmm, when I checked the preview I didn't see any console errors but maybe I missed something. https://githubetbroh8t-kukd--6006--5a421e5b.local-credentialless.webcontainer.io/

Is that the right URL? Also, why do you need require.js anyway as its quite old I think?

[herrKlein]

In the console of the full screen opened stackblitz preview, there will appear tocbot.init is not a function and tocbot will not work. requirejs indeed is a very old library, and we would rather not use it, but it is required in the technical spec. and we have some components which rely on lazy loading with AMD. sadly storybook breaks if we include requirejs due to tocbot. Does tocbot internally use the require keyword itself ( for other things then requirejs ) ?

[tscanlin]

Tocbot just uses require like any other node packages and doesn’t do anything special. Can you initialize tocbot before importing require.js? Sorry I’ve been slow to respond as I’ve been traveling. Let me know if you have any updates on this. Hoping to help get you unblocked.

[herrKlein]

I filed a bug in storybook: https://github.com/storybookjs/storybook/issues/31082

Hoping that helps.