Unable to set window variables

[marina-mosti]

Describe the bug Within storybook I am unable to set a window variable.

We have i18n data that is set on a window.i18n variable. Storybook seems to prevent setting window variables, or overrides them. The documentation doesn't really specify at which point this could be/should be done.

To Reproduce Steps to reproduce the behavior:

1. Set window.test = 'hi' in preview.js or in a script tag in the header
2. Check the console and window.test is undefined

Expected behavior window.test should be defined and accessible to the stories

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem.

System:

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.4 - ~/.npm-global/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.19 => 5.3.19
    @storybook/addon-actions: ^5.3.19 => 5.3.19
    @storybook/addon-centered: ^5.3.19 => 5.3.19
    @storybook/addon-knobs: ^5.3.19 => 5.3.19
    @storybook/addon-links: ^5.3.19 => 5.3.19
    @storybook/addon-notes: ^5.3.19 => 5.3.19
    @storybook/addons: ^5.3.19 => 5.3.19
    @storybook/vue: ^5.3.19 => 5.3.19

Additional context Add any other context about the problem here.

[shilman]

I"d expect that to work. We're using window in .storybook/preview.js here:

https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/.storybook/preview.ts#L9

which calls

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/angular/compodoc.ts#L22-L25

[marina-mosti]

@shilman Thanks for the reply I tried doing:

window.test = 'test'
console.log('window', window, window.test)

The window object logged in the console definetly has a test property, but when you try to access it from the global scope of the console, or from within the app it is not defined

[shilman]

@marina-mosti storybook contains the main window (aka "manager") and an iframe where the stories are rendered (aka "preview"). when set window.test in preview it should be available in all your stories. if you're trying to access it from the console, make sure that the console is set to the iframe:

[marina-mosti]

@shilman Thanks a ton for your help :)

[nimbfire]

Wow, that makes sense!

Is it possible to add this in the global variable documentation? Like, with the screenshot? We are so used to just open the console and be able to use it to access "global" variables that the possibility that its an iframe does not cross our mind...

Like, I've tryied follow what was said here https://storybook.js.org/docs/react/essentials/toolbars-and-globals but in the end this issue here gave me the answer: my global variables do exist, I just checking them on the wrong place :)

Cheers and great work!

[shilman]

@jonniebigodes