head.html is not loaded in storyshots

[shilman]

Issue by eric-burel
Tuesday Apr 11, 2017 at 09:47 GMT
Originally opened as storybook-eol/storyshots#96

---

In v2.1.0, .storybook/head.html/ does not seem to be taken into account. My issue is that its where I load jQuery, which is mandatory for bootstrap to work (I found no other solution than using head.html to get Bootstrap working with webpack).
Edit: same issue with 3.1.1 so far, I am trying to find a solution.

[HBCharles]

I'm also having the issue with 4.5.0. Is there any solution to this ?

[tmeasday]

Reproduced here: https://github.com/tmeasday/storybook/tree/issue-894

Note that (a) the tests fail in the test-cra app, but (b) the storybook runs without errors.

[shilman]

@tmeasday thanks for creating a repro. my understanding: head.html is loaded in the preview window's iframe. therefore it doesn't show up in the outer window.

Added the following head.html to create-react-app/getstorybook yields:

<style> body {  background: yellow; }</style>

[tmeasday]

@shilman -- correct. It's just that storyshots doesn't respect that, so the environment a story renders in in the UI (the preview window) is different from how it is rendered in the test (with a simple renderer.create(..)), thus the errors.

[shilman]

@tmeasday oh sorry this is a storyshots issue. my misunderstanding!

[tmeasday]

Hmm, thinking about this some more, I'm not sure there is a good solution to the problem. Does any one have any good ideas?

[zeroasterisk]

see: 5c0eb41

it should work with either, but it's officially renamed to preview-head.html

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[tmeasday]

Looking at this again, I reckon the real "solution" here is to not put JS includes in preview-head.html.

I wonder if the problem (needing static includes) could be solved in some other way, like a require from .storybook/config?

[Hypnosphi]

You always can insert scripts dynamically:

const script = document.createElement('script')
script.src = "..."
document.head.appendChild(script)

You can even extract it into a helper function which would accept src string

[tmeasday]

Perhaps @eric-burel or @HBCharles could confirm if the above technique, as posted by @Hypnosphi helps?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[johnend]

Did anyone find a solution to this? I want to start using StoryBook as part of our front-end development workflow on Vue projects, but having done some testing tonight I have come across this problem.

Attempting to include:

<script defer src="../build/fontawesome-all.js"></script>

Within preview-head.html did not work, neither did including a script and dynamically attempting to reference the file, as below.

<script>
  const script = document.createElement('script')
  script.src = "../build/fontawesome-all.js"
  document.head.appendChild(script)
</script>

I'm simply getting 404s for both methods.

[tmeasday]

@johnend -- did @Hypnosphi's solution work for you?

[johnend]

Sorry just updated, posted too early.

[johnend]

I'm wondering if it might be cross origin stuff going on due to the use of iFrames?

[Hypnosphi]

You can try to add that code to config.js instead

[tmeasday]

@johnend -- the preview-head.html file is not evaluated for storyshots at all (storyshots only runs your JS code, so it doesn't necessarily make sense to try and evaluate HTML code -- although we could with JSDOM perhaps).

So the solution as suggested by @Hypnosphi is to try to avoid including JS code in preview.head and instead put it in .storybook/config.js where possible.

[johnend]

Ok so having done that, I'm still getting a 404 for the script for font awesome. Tag is being included in the head and is referencing the correct folder. Just updating to let you know.

[tmeasday]

@johnend is this in storyshots or regular storybook now?

[johnend]

This is in regular storybook. Sorry I think I’ve posted my comments on the wrong issue. Didn’t realise storyshots was an add on and not just the iframe for the components.

[tmeasday]

No worries. I suspect maybe you need to use the -s option to set the static directory?

…

On Tue, 16 Jan 2018 at 7:23 pm, John Enderby ***@***.***> wrote: This is in regular storybook. Sorry I think I’ve posted my comments on the wrong issue. Didn’t realise storyshots was an add on and not just the iframe for the components. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#894 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAIFyjilirTEMXMFI87x5WxIGZXvGb-8ks5tLFyKgaJpZM4M-aVF> .

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!