CODEWITHSUNDEEP
reactjsstorybook
AdamHinckley
AdamHinckley

Reputation: 235

How to use global variables in Storybook with React

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?

Upvotes: 2

Views: 13392

Answers (2)

Maksim Tetslav
Maksim Tetslav

Reputation: 51

I have a custom build, maybe it will not work with CRA.

I just add webpack.config.ts file in .storybook folder, near main.js and preview.js and add there DefinePlugin with my variable like this:

import { Configuration, DefinePlugin } from 'webpack';
import path from 'path';

export default ({ config }: { config: Configuration }) => {
    config.plugins.push(
        new DefinePlugin({
            __IS_DEV__: true
        })
    );

    return config;
};

Hope my solution will help someone in the future.

Upvotes: 2

David
David

Reputation: 972

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>

Upvotes: 8

Related Questions