如何在 Storybook 和 React 中使用全局变量

Question

I found this answer, but I am not able to solve the issue with it.

The component I trying to load in Storybook depends on a global variable that is injected via a CDN in index.html.

To access the variable in the component I added this comment at the top of the file

/*global <variable name>*/

It's working fine in the React app, but Storybook throwing this error: <variable name> is not defined .

I tried adding that comment at the top of the stories.js file and at the top of the config file. - no luck.

The URL for the CDN is in an env file. From looking at this doc I tried adding a second script in the HTML file with an env variable that is prepended with STORYBOOK_ . That didn't work either.

Any ideas on what I can do to get past this?

Answer 1

I've solved this by adding custom head tags: https://storybook.js.org/docs/configurations/add-custom-head-tags/#docs-content

Then adding my global variables there, for example:

// preview-head.html
<script>
var foo = bar
</script>