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

Upgrade to 6.2.1 caused WSOD #14410

Closed
thany opened this issue Mar 31, 2021 · 41 comments
Closed

Upgrade to 6.2.1 caused WSOD #14410

thany opened this issue Mar 31, 2021 · 41 comments

Comments

@thany
Copy link

thany commented Mar 31, 2021

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:

  1. Have 6.1.11 installed
  2. Upgrade
  3. ???

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.

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.114
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.63)
  npmPackages:
    @storybook/addon-docs: 6.2.1 => 6.2.1
    @storybook/addon-links: 6.2.1 => 6.2.1
    @storybook/addons: 6.2.1 => 6.2.1
    @storybook/react: 6.2.1 => 6.2.1

┆Issue is synchronized with this Asana task by Unito

@shilman
Copy link
Member

shilman commented Mar 31, 2021

AFAICT the zipfile contains a single HTML file. can you try again?

Did you try removing node_modules and/or lockfiles and reinstalling?

@thany
Copy link
Author

thany commented Mar 31, 2021

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 node_modules / the lockfile.

@shilman
Copy link
Member

shilman commented Mar 31, 2021

Is this in the dev server or static build? Do these files exist?

      <script src="runtime~main.manager.bundle.js"></script>
      <script src="vendors~main.manager.bundle.js"></script>
      <script src="main.manager.bundle.js"></script>

@thany
Copy link
Author

thany commented Mar 31, 2021

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:

0.1c5641ba.iframe.bundle.js
0.a82e9d1e077489f89fcf.manager.bundle.js
4.2bf0d1c346412f28f228.manager.bundle.js
4.2bf0d1c346412f28f228.manager.bundle.js.LICENSE.txt
4.573afbe4.iframe.bundle.js
5.0a0a2f5967b8f605818c.manager.bundle.js
5.0a0a2f5967b8f605818c.manager.bundle.js.LICENSE.txt
5.f9de55bd.iframe.bundle.js
6.170059e01b6d7cfa290a.manager.bundle.js
6.51657986.iframe.bundle.js
7.16cc0bee.iframe.bundle.js
7.a38639ab7b6630b8906a.manager.bundle.js
favicon.ico
iframe.html
index.html
main.4c1138b3.iframe.bundle.js
main.4f82d9adf5fc5f1cc27e.manager.bundle.js
runtime~main.ac7d26c3.iframe.bundle.js
runtime~main.fdeb373d1f9f021f8548.manager.bundle.js
vendors~main.3956b13309d52df80ebb.manager.bundle.js
vendors~main.3956b13309d52df80ebb.manager.bundle.js.LICENSE.txt
vendors~main.f77e4c3e.iframe.bundle.js
vendors~main.f77e4c3e.iframe.bundle.js.map
vendors~main.f77e4c3e.iframe.bundle.js.LICENSE.txt

Btw removing node_modules / the lockfile did not help.

@shilman
Copy link
Member

shilman commented Mar 31, 2021

@thany does dev mode work? what framework is it? do you have any custom webpack config?

@thany
Copy link
Author

thany commented Mar 31, 2021

It's React + Typescript. No custom webpack config at all. My .storybook/main.js is literally this:

module.exports = {
  stories: ['../src/**/*.stories.@(tsx|mdx)'],
  addons: ['@storybook/addon-docs', '@storybook/addon-links'],
};

Maybe .babelrc is relevant too:

{
  "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.

@shilman shilman added the react label Mar 31, 2021
@shilman
Copy link
Member

shilman commented Mar 31, 2021

@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

@infiniityr
Copy link

I have the exact same issues with a Vue project.
After an upgrade, I have a white screen with the same redirect.

I tried to remove node_modules and package-lock.json but the result was the same.

@infiniityr
Copy link

Is this in the dev server or static build? Do these files exist?

      <script src="runtime~main.manager.bundle.js"></script>
      <script src="vendors~main.manager.bundle.js"></script>
      <script src="main.manager.bundle.js"></script>

For your information and in my case, It is a dev server and those 3 files exists.

Here is a screenshot of the console logs
image

@temacode
Copy link

Same in Angular, build files exists, but nothing works. Updated from 6.1.21.

Снимок экрана 2021-03-31 в 22 40 59

@shilman
Copy link
Member

shilman commented Mar 31, 2021

@temacode Do you have a repro repo you can share?

@temacode
Copy link

@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

@turbulent-desfossez
Copy link

turbulent-desfossez commented Apr 1, 2021

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.

image

System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics    
     
  Binaries:
    Node: 12.18.2 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD        
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.63)  
  npmPackages:
    @storybook/addon-actions: ^6.2.1 => 6.2.1 
    @storybook/addon-essentials: ^6.2.1 => 6.2.1 
    @storybook/addon-links: ^6.2.1 => 6.2.1 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/vue: ^6.2.1 => 6.2.1 

Thanks

@thany
Copy link
Author

thany commented Apr 1, 2021

@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

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 create-hash (which might be the cause of the file hashes):
create-hash < browserify-aes < browserify-cipher < crypto-browserify < node-libs-browser < webpack < (several storybook packages).

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).

image

Surely this has nothing to do with the problem at hand?

@shilman
Copy link
Member

shilman commented Apr 1, 2021

@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.

@turbulent-desfossez
Copy link

Looks like it was a problem with my yarn install and the generated node_modules.
Because I created a repo to reproduce the Bug and after clone it again and made a clear yarn install, 6.2.1 works perfectly.

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.
My solution : node_modules should stay in the storybook folder and not generated by lerna.

@infiniityr
Copy link

@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.

Here is a reproduction of the bug
https://github.com/infiniityr/storybook-issue-wsod

I get the white screen doing this:

  • npm i
  • npm run serve:storybook

@shilman
Copy link
Member

shilman commented Apr 1, 2021

For those of you with WSOD problems, can you try running yarn storybook --no-manager-cache once and see if it fixes the issue?

@thany
Copy link
Author

thany commented Apr 1, 2021

Omg, I got it working.

Somehow, NCU didn't see some updates, updates that Storybook 6.2 appears to require. When I did a npm list --depth=0 I got a readable list of unmet peer dependencies, among which was React 16.3 ??!?! This is weird, because I had very explicitly instructed NCU to upgrade absolutely everything to the latest possible versions. And that should've included React 17.0.2, which it now does.

I'm still getting similar unmet peer dependencies for React being required by @reach/router, which makes it all the weirder that it now works anyway.

npm ERR! peer dep missing: eslint-plugin-flowtype@^5.2.0, required by [email protected]
npm ERR! peer dep missing: [email protected] || 16.x || 16.4.0-alpha.0911da3, required by @reach/[email protected]
npm ERR! peer dep missing: [email protected] || 16.x || 16.4.0-alpha.0911da3, required by @reach/[email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0 || ^16.0.0, required by [email protected]
npm ERR! peer dep missing: [email protected] || 16.x || 16.4.0-alpha.0911da3, required by @reach/[email protected]
npm ERR! peer dep missing: [email protected] || 16.x || 16.4.0-alpha.0911da3, required by @reach/[email protected]
npm ERR! peer dep missing: typescript@>=3.4 <4.0, required by [email protected]

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.

@shilman
Copy link
Member

shilman commented Apr 1, 2021

@thany that's really strange. unfortunately there's no version of @reach/router that fixes the dependency issue. i think we're going to replace it with react-router, which is what that package evolved to, and which supports react@17. at any rate, i'm happy to hear you got it working!

@infiniityr
Copy link

@thany I'm not sure to understand what you have done to make it work. Could you provide the steps to the resolution ?

@thany
Copy link
Author

thany commented Apr 2, 2021

@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.

@shilman
Copy link
Member

shilman commented Apr 2, 2021

@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.

@infiniityr
Copy link

I tried to reproduce the bug starting from a new project.
I've been able to reproduce the bug following those steps:

  • Create Vue2 project
  • Initialize Storybook
  • Personnalize storybook (main.js and preview.js)
  • Add the following addons:
    • "@storybook/addons": "6.2.3"
    • "@storybook/theming": "6.2.3"
    • "@storybook/addon-knobs": "6.2.3"
    • "@storybook/addon-viewport": "6.2.3"
    • "@storybook/addon-a11y": "6.2.3"

Once the addon are installed (but not imported in main.js !), Storybook won't show up.

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 node_modules and package-lock.json)

@shilman
Copy link
Member

shilman commented Apr 6, 2021

@infiniityr
Do you have a repro repo you can share?

@infiniityr
Copy link

infiniityr commented Apr 6, 2021

@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.

Here is a reproduction of the bug
https://github.com/infiniityr/storybook-issue-wsod

I get the white screen doing this:

  • npm i
  • npm run serve:storybook

Everything is in here

EDIT: I added the branch "empty-project" containing only the few steps that i've done

@shilman
Copy link
Member

shilman commented Apr 6, 2021

@infiniityr Oops thanks! Missed that!

@msisti
Copy link

msisti commented Apr 7, 2021

For those of you with WSOD problems, can you try running yarn storybook --no-manager-cache once and see if it fixes the issue?

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
Copy link

--no-manager-cache didn't solve my problem.
I dig the problem and found something:

node_modules@storybook\vue\node_modules@storybook\ui\dist\components\preview\preview.js

cannot find: merge.

var _merge = _interopRequireDefault(require("@storybook/api/dist/lib/merge"));

indeed; it was not in the package :
image

i edited the path (add /esm/)
var _merge = _interopRequireDefault(require("@storybook/api/dist/esm/lib/merge"));
and now it's working.

@shilman
Copy link
Member

shilman commented Apr 9, 2021

@turbulent-desfossez Did you make sure all your storybook packages are upgraded, try removing node_modules and/or lockfiles and reinstalling? You shouldn't need to do that.

@turbulent-desfossez
Copy link

@shilman After removing all node_modules and yarn.lock
I made a 'lerna bootstrap'
I made a yarn storybook --no-manager-cache

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.

@shilman
Copy link
Member

shilman commented Apr 9, 2021

@ndelangen any ideas about @turbulent-desfossez 's situation?

@turbulent-desfossez
Copy link

turbulent-desfossez commented Apr 12, 2021

If this can help.
Here a very detailed Step by Step of my investigation:

Structure:

  • node_modules/...
  • packages
    • lib-1 (react, no stories)
    • lib-2 (react, no stories)
    • lib-3 (react, no stories)
    • lib-4 (vue)
      • toto.vue
      • toto.stories.js
      • package.json
    • lib-5 (vue)
      • tata.vue
      • tata.stories.js
      • package.json
    • storybook
      • .storybook/
      • package.json
  • lerna.json
  • package.json
  1. In packages/ create an empty folder named 'storybook'
  2. npx sb init -t vue
  3. Successfully install
  4. Note: packages/storybook/node_modules includes all dependencies
  5. Note: in this project, we have only 1 storybook
  6. cd storybook then yarn storybook
  7. ✔️ Successful preview 6.2.7 with demo components (no errors)
  8. Delete packages/storybook/node_modules and packages/storybook/yarn.lock
  9. Delete root node_modules and yarn.lock
  10. In root 'lerna bootstrap' (generate a root node_modules for all packages)
  11. Note: packages/storybook/node_modules now, include only /.bin files for .cmd
  12. cd packages/storybook then yarn storybook
  13. ❌White screen - Got the error !!
  14. CTRL + C yarn storybook
  15. ✔️ Successful preview 6.2.7 with demo components (no errors)
  16. Looks like a cache was needed for the first try
  17. Note: a new directory was created in packages/storybook/node_modules/.cache/storybook
  18. in .storybook/main.js replace path to target lib-5/**/*.stories.js
  19. I created a webpack.config.js in .storybook/ for SCSS and TS compilation
  20. CTRL + C yarn storybook
  21. ✔️ Successful preview 6.2.7 with my components (no errors)
  22. Added ./storybook/preview-body.html and ./storybook/preview-body.html
  23. CTRL + C yarn storybook
  24. ✔️ Successful preview 6.2.7 with my components and the HTML (no errors)
  25. yarn add --dev @storybook/addons @storybook/theming
  26. Added manager.js and my-theme-ui.js
  27. ❌White screen - Got the error !!
  28. CTRL + C yarn storybook (tried a second time)
    28.❌White screen - Got the error !!
  29. Removed manager.js and my-theme-ui.js
  30. CTRL + C yarn storybook
  31. ❌White screen - Got the error !!
  32. CTRL + C yarn storybook --no-manager-cache
  33. ❌White screen - Got the error !!
  34. I deleted this folder packages/storybook/node_modules/.cache/storybook/
  35. CTRL + C yarn storybook
  36. ❌White screen - Got the error !!
  37. CTRL + C yarn storybook (tried a second time)
  38. ✔️ Successful preview 6.2.7 with my components and the HTML (no errors)
  39. Looks like a cache issue again
  40. Added manager.js and my-theme-ui.js (again) (I expect the same error)
  41. ❌White screen - Got the error !! (as expected)
  42. I deleted this folder packages/storybook/node_modules/.cache/storybook/ (I expect NO error after 2 yarn storybook)
  43. CTRL + C yarn storybook (tried 2 times)
  44. ❌White screen - Got the error !! (I didn't expect that)
  45. I removed again manager.js and my-theme-ui.js AND .cache/storybook/ Then yarn storybook twice
  46. ✔️ Successful preview 6.2.7 (something wrong with manager.js or my-theme-ui.js ???).
  47. Note: In my webpack.config.js I made a console.log(config.resolve.alias); and path are good.

Manager.js

import { addons } from '@storybook/addons';
import myTheme from './my-theme-ui'

addons.setConfig({
  theme: myTheme
})

my-theme-ui.js

import { create } from '@storybook/theming/create';

export default create({
  base: 'dark',
  brandTitle: 'My Theme',
  brandUrl: 'https://google.com/',
});
  1. Note: If I add a new addon in main.js, ex: @storybook/addon-knobs I got the same error (even though I delete the .cache and try twice).
  2. Note: Rolling back to 6.1.21 fix my issue.

@ndelangen
Copy link
Member

ndelangen commented Apr 12, 2021

@turbulent-desfossez
what version is node_modules@storybook\vue\node_modules@storybook/core/package.json?

it should be the same version as node_modules@storybook\vue\package.json

Are you overriding webpack aliasses? I think you're removing them, which we have in place to prevent issues like these.

@turbulent-desfossez
Copy link

@ndelangen
Thanks for the reply.

I made a search in my root node_modules on 6.1.21
No results.
Only for 6.2.7.
I checked my yarn integrity too and my yarn.lock.

I didn't find a package.json here: node_modules@storybook\vue\node_modules@storybook/package.json
image

But deeper yes:
node_modules\@storybook\vue\node_modules\@storybook\core\package.json
image

I'm not overriding Webpack aliases. My Webpack config is only used for SCSS and TS loader.

@infiniityr
Copy link

infiniityr commented May 11, 2021

Hi everyone,

FYI, I managed to resolve the WSOD.

In .storybook/main.js, I removed the webpackFinal configuration to move it to .storybook/webpack.config.js

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...

@shilman
Copy link
Member

shilman commented May 11, 2021

@infiniityr oooh -- thanks for sharing. should give us something to track down 🙏

@seferturan
Copy link

seferturan commented Jun 24, 2021

Not really a useable workaround in my case, but maybe it'll help with tracking down the issue:

Upgrading Storybook from 6.1.21 to 6.3.0 also resulted in a WSOD. But, downgrading react from 17.0.2 to 16.14.0 does get rid of the WSOD. Which feels weird, since none of my stories use react components (I'm using @storybook/html).

Just having react 17.0.2 seems enough to result in a WSOD, because even if I remove all react code from the codebase, it still results in a WSOD.

@Sumolari
Copy link

--no-manager-cache didn't solve my problem.
I dig the problem and found something:

node_modules@storybook\vue\node_modules@storybook\ui\dist\components\preview\preview.js

cannot find: merge.

var _merge = _interopRequireDefault(require("@storybook/api/dist/lib/merge"));

indeed; it was not in the package :
image

i edited the path (add /esm/)
var _merge = _interopRequireDefault(require("@storybook/api/dist/esm/lib/merge"));
and now it's working.

@turbulent-desfossez I experienced the same issue. Turns out even after updating the dependencies and running yarn --check-files a couple of times, I had in my node_modules @storybook/[email protected] instead of the version corresponding to the Storybooks version I upgraded to (@storybook/[email protected] in my case).

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.

@turbulent-desfossez
Copy link

thanks @seferturan it works for us too by downgrading react.

@codingwithchris
Copy link

@ndelangen FYI - Seeing this exact same issue as described above in Storybook 6.4.20 using svelte with the exact same errors mentioned previously. Using svelte @storybook/addon-svelte-csf 1.1.0. Attached screenshots below and happy to provide any additional info.

Screen Shot 2022-04-04 at 4 45 00 PM
Screen Shot 2022-04-04 at 4 45 05 PM

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

10 participants