Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

preview-head.html is not rendered again in hot reload #3176

Closed
caub opened this issue Mar 9, 2018 · 4 comments
Closed

preview-head.html is not rendered again in hot reload #3176

caub opened this issue Mar 9, 2018 · 4 comments

Comments

@caub
Copy link

caub commented Mar 9, 2018

steps

have a preview-head.html file at the root of storybook folder

insert <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> in it for testing

in your stories add a story with <span className="material-icons">close</span> in it, this renders a cross icon, when the fonts are loaded

It works in the main storybook page, and even for that story (&full=1) if you reload, the fonts works

but in development mode (I use "storybook": "start-storybook -p 9001 -c .storybook",) as soon as editing this particular story, it's re-rendered, and you see suddenly close instead of a , I guess preview-head.html is ignored

version

"@storybook/react": "^3.3.14"
@caub
Copy link
Author

caub commented Mar 9, 2018

for the reproduction, it's not really easy in a codesandbox or fiddle

you can reproduce with any storybook setup (having react, babel, .. all set up), add a preview-head.html containing <style>body {border: 2px red solid}</style> for example, run npx storybook, edit a story, save and observe the body styling disappears

here's a quick video: https://i.imgur.com/sR9KTQ6.gifv

@ndelangen do you need a standalone reproduction repo for this issue? then I'll try to make one from one of the examples

@caub
Copy link
Author

caub commented Mar 10, 2018

I couldn't reproduce using examples/official-storybook (and its preview-head.html) I'll search more the issue, will make a simple standalone repo

@ndelangen
Copy link
Member

thanks! Will take a look if you can provide a reproduction repo 👍 .

@caub
Copy link
Author

caub commented Mar 10, 2018

Ok, I found the issue
https://github.com/caub/storybook-preview-head
I was using my main webpack config (because I needed special resolves) but that one were also using an html template, which was used after hot reload (hence the missing styling from preview-head.html)

I just need to avoid HtmlWebpackPlugin in storybook

It was more weird in my actual repo, since storybook templates was loaded initially as you can see in the video, and then the webpack template was loaded instead. In this repo, it's only loaded the webpack template, even if I tried to keep the env as much similar as possible

Thanks, closing, maybe there can be things, like warnings to add on storybook side in such a case

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants