Storybook: Theme is cached between unrelated instances

[ghengeveld]

Describe the bug
When running multiple Storybook projects, the logo from one project is shown in another. Investigation shows that the logo URL is stored in @storybook/ui/store in LocalStorage, which explains why this happens.

To Reproduce
Steps to reproduce the behavior:

1. Setup a Storybook with a custom brandImage and run it locally.
2. Setup another Storybook with default config.
3. Kill the first Storybook, run the second on the same port.
4. The custom logo from the first appears on this completely unrelated Storybook.

Expected behavior
The second project should show the default Storybook logo.

System:
Mac OS, Chrome

[github-actions[bot]]

Automention: Hey @domyen, you've been tagged! Can you give a hand here?

[mickaelzhang]

I'm having a similar issue where I tested to create and apply a theme to my current project. At the end, I removed it but the change that I made are still there in dev mode

[shilman]

An ugly workaround... In browser dev console:

> localStorage.clear()

[mickaelzhang]

Oh didn't know that the theme was stored in localStorage, what's the reason if you don't mind @shilman ?

[shilman]

@mickaelzhang I believe that if we didn't cache it, Storybook would show up with the default theme while it loads and then switch to configured theme after a second or two. With caching, it immediately shows the user-configured theme, and then updates after the configuration loads (tho it seems like that part is broken). Maybe @ndelangen can comment more

[mickaelzhang]

@shilman Oh right, it make sense !

It might be due to the fact that I'm using the default theme so no update is done after loading the theme from localStorage ?

[shilman]

That's a good thought @mickaelzhang -- I bet that's it! @ndelangen is that an easy fix?

[ndelangen]

@shilman @mickaelzhang If no theme is set at all, then I don't know a good fix really...

Here's a concept though:
If you're using multiple storybooks and they all have their own theme.
Make sure they all have their own port. That way they do not share the localstorage between them.

[ndelangen]

This relates to #6806
If the theme is loaded from the manager itself instead of loaded in the preview, then transmitted to the manager, the delay disappears. This means we don't have to cache the theme in the localstorage anymore to prevent the flash of incorrect theme (FOIT) 😄

[ndelangen]

The best way to fix this right now, if to always set a theme, even if using the default one.

[stale[bot]]

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 30 days. Thanks!

[stale[bot]]

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!

[xBau]

This issue is still happening to me with Storybook 5.2.5, the brand logo is being cached after removing a custom theme.

To Reproduce

1. Add a theme with a custom brandImage
2. The theme is showed properly
3. Remove the custom theme and keep setting by default (no options.theme at all)
4. The theme is removed but you can still see the former theme brandImage
5. localStorage.clear() in dev console solves the issue

[shilman]

@ndelangen is working on a solution in 5.3! 🎉

[webholics]

This is still happening for me in storybook v5.3.18

[shilman]

I believe this is fixed in 6.0-alpha.

[jpcmf]

I'm facing this issue right now on 6.1.3

[shilman]

@jpcmf tracked in #13200

[jpcmf]

I figured out to fix this removing node_modules/.cache/storybook
I didn't know about the --no-manager-cache flag, thank you @shilman