Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Changing globals in toolbar reloads whole site and sometimes don't work#26941

Unanswered
JuhG asked this question inHelp
Discussion options

Summary

Maybe these are two separate issues

  • whenever we change the globals in the toolbar, the whole documentation page reloads, not just the stories (is it because the whole page is wrapped insideThemeProvider?)
  • in some cases it fails, doesn't update the globals and just reloads the old version. copied the error message and a video of it in "Additional information"

Anyone ran into something similar?

Additional information

Here's a video of it:
https://github.com/storybookjs/storybook/assets/10765158/2d28e389-36e5-48a9-ac95-a69cc37da7b4

And here's the error message:
Screenshot 2024-04-24 at 13 53 23

The error message in text:
manager - received storyRenderPhaseChanged but was unable to determine the source of the event
manager - received globalsUpdated but was unable to determine the source of the event

And here's the relevant part of thepreview.tsx:

constpreview:Preview={  ...globalTypes:{mode:{defaultValue:"dark",toolbar:{title:"Mode",items:["light","dark"],dynamicTitle:true,},},    ...},decorators:[(Story,context)=>{return(<ThemeProvider...><Story/></ThemeProvider>);},],}

Create a reproduction

No response

You must be logged in to vote

Replies: 6 comments 5 replies

Comment options

Found a related issue:#15659
I'm going to expand on both of these issues and why they are hard to reproduce

Changing globals reloads the documentation page

This is related topreview.parameters.docs.container ordecorators - when you wrap the documentation page withThemeProvider that uses these globals, it reloads the page, not just rerenders the component. For some reason it doesn't do this in a stackblitz example - tried to remove components and simplify themain.stories array and at some point it fixed itself. So looks like SB only does this when there are a lot of components, maybe some race condition or performance bottleneck we're hitting. But this is just a guess. We have something like 50+ components, so nothing crazy.

Changing globals fails in some cases

received X but was unable to determine the source of the event - seems likeevent.source is undefined ingetEventSourceUrl:

event.source=
this.config.page==='preview' ?rawEvent.origin :getEventSourceUrl(rawEvent);

I'm not familiar with the code, so not sure why we need different logic on docs page and preview page.rawEvent.origin is always defined, but in that function the code looks for the source, which is not available sometimes. The strange part is that in some cases it works. A couple of components always work, others mostly fail, some fails in a way that changing the global doesn't even happen - which is the most frustrating part of this. (again, some of this is guessing)

So if I change that like to

event.source=rawEvent.origin;

this issue goes away. Most probably there's a reason this needs to happen, but want to say that the issue is ingetEventSourceUrl.ts I think.

You must be logged in to vote
0 replies
Comment options

Hello.

I've ran into something similar. The same issue happens to me in docs pages with "larger" stories. It indeed seems to be some race condition since the issue happens more frequently when stories grow bigger. It also happens more frequently in development than in production builds.
Another interesting thing is that it works fine when you change globals using theuseGlobals hook in a decorator.

I've made areproduction repo and hosted it with Chromatichere. I have use Material-UI but I don't think that is the actual cause. It seems to happen without MUI as well as long the render phase of the story is long/heavy.
Just note that Chromatic hosts a productional build and therefor you don't see the error in the console and neither does it happen as frequently.

You must be logged in to vote
0 replies
Comment options

Thanks@nukemonk, awesome example. Referenced this in the related issue.

This is how console looks like locally running it:
Screenshot 2024-08-02 at 10 49 51

You must be logged in to vote
0 replies
Comment options

Any news on this? Experiencing it on8.1.11

You must be logged in to vote
1 reply
@nukemonk
Comment options

Doesn't seem like it, unfortunately

Comment options

I am having the same issue on 8.6.0

You must be logged in to vote
0 replies
Comment options

The issue still persists on Storybook 9.1.8. The only difference is that at least the selected value persists. So it does not sometimes use the old value anymore.

You must be logged in to vote
4 replies
@damisparks
Comment options

@JuhG or anyone managed to solve it?

@damisparks
Comment options

Never mind. I figured it out.

@JuhG
Comment options

hey@damisparks would you mind sharing what you've found?

@binaryfire
Comment options

Would also love to know if there's a workaround. Hitting the same problem with Storybook 10 and Tanstack Start

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Help
Labels
None yet
6 participants
@JuhG@binaryfire@nukemonk@ChristopherJohnson25@damisparks@KurtRogers

[8]ページ先頭

©2009-2025 Movatter.jp