-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
Upgrade to 6.2.1 caused WSOD #14410
Comments
AFAICT the zipfile contains a single HTML file. can you try again? Did you try removing |
Yes, it's a single file, that was intended. That is what Storybook renders itself as. So I opened Storybook in the browser, and just hit Ctrl+S. This file is the literal output. There are no frames, apparently. I'll try removing |
Is this in the dev server or static build? Do these files exist?
|
It's puttng hashes in the filenames, but the html that Storybook renders as, does not have those hashes... That might have to do with it. This is what a static build outputs in my case:
Btw removing |
@thany does dev mode work? what framework is it? do you have any custom webpack config? |
It's React + Typescript. No custom webpack config at all. My module.exports = {
stories: ['../src/**/*.stories.@(tsx|mdx)'],
addons: ['@storybook/addon-docs', '@storybook/addon-links'],
}; Maybe {
"presets": ["@babel/env", "@babel/react"],
"plugins": [
"babel-plugin-styled-components"
]
} Otherwise there's nothing really out of the ordinary as far as I can tell. I also can't find any package that is supposed to perform (or remove) file hashes. Oh and here's the package.json, maybe that reveals something. |
@thany looks like it's based on tsdx? i'm going to try to generate a repro with that UPDATE: a fresh tsdx project running 6.2.1 has no issues as far as I can tell |
I have the exact same issues with a Vue project. I tried to remove |
For your information and in my case, It is a dev server and those 3 files exists. |
@temacode Do you have a repro repo you can share? |
@shilman unfortunately, the repository is private, a little later I'll try to write how to reproduce it. However, a little googling showed that this is some kind of problem in routing, i think |
Since my upgrade from 6.1.21 to 6.2.1, after deleterd my node_modules and the lock files, then a fresh yarn install, I experienced the same error with Storybook + @storybook/vue.
Thanks |
Sorry but I don't think TSDX should make a difference. Building/starting Storybook doesn't invoke TSDX, does it? But what exactly does invoke then? And where is it pulling configs from? Because I might need to overrule its creation of hashes, for some reason... EDIT: from the package-lock.json I can infer a dependency path towards Does that mean anything to you? EDIT2: I also noticed the output when starting Storybook is messy. There are two deprecation warnings about PostCSS. The documentation only speaks about what to do when you do need PostCSS, but not what to do if you don't need PostCSS (and thus, when the deprecation warning is just noise). Surely this has nothing to do with the problem at hand? |
@thany i need a repro to be able to diagnose the problem. tsdx sets up an environment on install, so i thought i might get a repro on a new tsdx project. but alas, it didn't repro. |
Looks like it was a problem with my yarn install and the generated node_modules. The problem, I think, was my project using Lerna to generate multi package.json and create a root node_modules it could be related to that. |
Here is a reproduction of the bug I get the white screen doing this:
|
For those of you with WSOD problems, can you try running |
Omg, I got it working. Somehow, NCU didn't see some updates, updates that Storybook 6.2 appears to require. When I did a I'm still getting similar unmet peer dependencies for React being required by
I don't know how to fix these. I can't upgrade that router, because it's part of Storybook. Maybe in the future, it might be helpful to list packages that also must be updated (or must remain on an older version), in order for an upgrade to complete with more chance of success. |
@thany that's really strange. unfortunately there's no version of |
@thany I'm not sure to understand what you have done to make it work. Could you provide the steps to the resolution ? |
@shilman Thanks for the help. I'm glad to see the problem was on my end. Sorry to have bothered you with it. @infiniityr I ended up manually checking each and every dependency in our project for the latest version. Where something wasn't updated, I updated it. What I don't understand, is why building our project worked fine, while Storybook was not fine. Maybe this nudges you in the right direction. Otherwise your problem might be of a slightly different nature. |
@thany I'm going to keep this issue open since it seems other people are hitting the problem. Perhaps we can figure out a more reliable workaround. |
I tried to reproduce the bug starting from a new project.
Once the addon are installed (but not imported in Unfortunately, I haven't been able to identify the addon causing the problem. And once I've got the white page, I can't go back to where It worked (even removing |
@infiniityr |
Everything is in here EDIT: I added the branch "empty-project" containing only the few steps that i've done |
@infiniityr Oops thanks! Missed that! |
Hi @shilman, running storybook with that flag resolved the WSOD issue for me. I'm curious if this is a short-term workaround until something more permanent can be patched in, or if it shows there's an issue with my configuration? Thank you! |
@turbulent-desfossez Did you make sure all your storybook packages are upgraded, try removing |
@shilman After removing all node_modules and yarn.lock and got exactly the same error that my previous message : #14410 (comment) Another member of my team working in the same repository has the same error. |
@ndelangen any ideas about @turbulent-desfossez 's situation? |
If this can help. Structure:
Manager.js
my-theme-ui.js
|
@turbulent-desfossez it should be the same version as Are you overriding webpack aliasses? I think you're removing them, which we have in place to prevent issues like these. |
@ndelangen I made a search in my root I didn't find a package.json here: But deeper yes: I'm not overriding Webpack aliases. My Webpack config is only used for SCSS and TS loader. |
Hi everyone, FYI, I managed to resolve the WSOD. In You can find the fixed empty-project here EDIT : With a fresh install, it does not work... I don't know where to start to look at and it is kind of annoying... |
@infiniityr oooh -- thanks for sharing. should give us something to track down 🙏 |
Not really a useable workaround in my case, but maybe it'll help with tracking down the issue: Upgrading Storybook from Just having react |
@turbulent-desfossez I experienced the same issue. Turns out even after updating the dependencies and running After wiping node_modules and installing the dependencies again I got rid of the WSOD. Not sure if this happened only to me. My project is using Yarn 1.x and Yarn workspaces. |
thanks @seferturan it works for us too by downgrading react. |
@ndelangen FYI - Seeing this exact same issue as described above in Storybook 6.4.20 using |
Describe the bug
I've upgraded from 6.1.11 to 6.2.1 without changing any config, and now starting it causes a WSOD.
Here it is: Storybook.zip
I see that when going to localhost:6006 (where it runs) it redirects to localhost:6006/?path=/settings/release-notes which is probably not correct. That is not the starting page that it always used to be.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Should keep working
Screenshots
No screenshot, it's a literal white blank screen with absolutely nothing visible, apart from white pixels (and a lot of them).
System
Please paste the results of
npx sb@next info
here.┆Issue is synchronized with this Asana task by Unito
The text was updated successfully, but these errors were encountered: