@storybook/web-components 6.3.1 WSOD with no console Errors

[futurethang]

Describe the bug I know other issues are active, and so far I have not found working solutions for my case. I am also experiencing a blank white screen, with no terminal or browser console errors at all.

Project is built on Lit Element / Lit HTML

To Reproduce https://github.com/momentum-design/momentum-ui/tree/kehyde/storybook-upgrade/web-components

run yarn install run yarn storybook

System Please paste the results of npx sb@next info here.

System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: 91.0.864.59
    Firefox: 82.0.3
    Safari: 14.1
  npmPackages:
    @storybook/addon-a11y: ^6.3.0 => 6.3.1 
    @storybook/addon-docs: ^6.3.0 => 6.3.1 
    @storybook/addon-essentials: ^6.3.0 => 6.3.1 
    @storybook/addon-knobs: ^6.3.0 => 6.3.0 
    @storybook/api: ^6.3.1 => 6.3.1 
    @storybook/storybook-deployer: ^2.8.10 => 2.8.10 
    @storybook/theming: ^6.3.1 => 6.3.1 
    @storybook/web-components: 6.3.1 => 6.3.1 

Additional context

main.ts:

import * as webpack from "webpack";
import { commonDev } from '../webpack.config';

/**
 * merge two arrays into one and remove the duplicates
 *
 * @param merger
 * @param mergee
 * @returns {Array<any>} merged unique array
 */
const mergeUnique = (merger: Array<any>, mergee?: Array<any>) =>
  mergee ?
    merger.concat(mergee.filter((item: any) => merger.indexOf(item) === -1)) :
    merger;

module.exports = {
  stories: [
    "../src/components/**/*.stories.ts",
    "../src/components/**/*.stories.mdx",
    "../src/internal-components/color-table/ColorTable.stories.ts",
    "../src/internal-components/color-table/*.stories.mdx"
  ],

  addons: [
    "@storybook/addon-knobs/register",
    "@storybook/addon-a11y/register",
    "@storybook/addon-docs",
    "@storybook/addon-controls",
    "@storybook/addon-actions/register",
    "@storybook/addon-viewport"
  ],

  webpackFinal: async (storybookConfig: webpack.Configuration, { configType }: { configType : "DEVELOPMENT" | "PRODUCTION" }) => {

    console.log("Storybook build mode: ", configType);

    // RESOLVE
    {
      storybookConfig.resolve = storybookConfig.resolve || {};

      // EXTENSIONS
      {
        storybookConfig.resolve.extensions = mergeUnique(storybookConfig.resolve?.extensions || [], commonDev.resolve?.extensions || []);
      }

      // ALIAS
      {
        storybookConfig.resolve.alias = commonDev.resolve?.alias;
      }
    }

    // MODULE
    {
      storybookConfig.module = storybookConfig.module || { rules: [] };

      // RULES
      {
        storybookConfig.module.rules = mergeUnique(storybookConfig.module.rules, commonDev.module?.rules || []);
      }
    }

    // PLUGINS
    {

      // Storybook production has it's own tuned HtmlWebpackPlugin
      const omitPluginNames = (configType === "DEVELOPMENT") ? [] : ["HtmlWebpackPlugin"];

      const plugins = (commonDev.plugins || []).filter(p => omitPluginNames.indexOf(p.constructor.name) === -1);

      storybookConfig.plugins = mergeUnique(storybookConfig.plugins || [], plugins);
    }

    return storybookConfig;
  }
}

manager.ts:

import { addons } from '@storybook/addons';

addons.setConfig({
  isFullscreen: false,
  showNav: true,
  showPanel: true,
  panelPosition: 'bottom',
  sidebarAnimations: true,
  enableShortcuts: true,
  isToolshown: true,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  sidebar: {
    showRoots: false,
  }
});

preview.ts:

import { addParameters, setCustomElements } from "@storybook/web-components";
import customElements from './custom-elements.json';

/**
 * Custom element file generated automatically by execute this command
 * npx web-component-analyzer src\components\**\*.ts --outFile .storybook\custom-elements.json
*/

// addDecorator(withA11y);

setCustomElements(customElements);

addParameters({
  docs: {
    inlineStories: false,
  },
  controls: { expanded: true },
  a11y: {
    config: {},
    options: {
      checks: { 'color-contrast': { options: { noScroll: true } } },
      restoreScroll: true,
    },
  },
  options: {
    storySort: {
      order: ['Components', 'Internal References'],
      method: 'alphabetical'
    }
  }
});

[robheittman]

When I went from from 6.3.0-rc.11 -> 6.3.1, on Chrome specifically (which is what Storybook auto-opens on my machine) I experienced this going to http://localhost:6006/ - but http://localhost:6006/? then worked. Incognito window and other browsers worked without the query string. Hard refresh (cmd-shift-R) on the WSOD page fixed it in Chrome. I imagine something about my site headers allowed the browser to cache the page with no query string, which then pointed to the wrong assets when I upgraded versions.

[livthomas]

This is a super-annoying issue that we experience over and over again every time we update Storybook. I know it can be easily fixed by hitting Ctrl+F5 but it's not obvious at all for somebody experiencing it for the very first time. And even when hit this problem for the second time, you might not remember the solution right away since dependencies are not being updated so often. I just want to say that with this issue not fixed, so much time of many developers is being wasted on such a stupid thing.

[shilman]

@livthomas any idea how to fix it?

[livthomas]

@shilman I don't know what caching mechanism you've added recently (since this problem started to pop up just a few months ago). If it relies on some outdated files, you can remove those files in postinstall git hook. And if it's caused by the way browsers work, you can try to force refresh the page automatically when Storybook is started for the first time after an update. Or add some kind of check to your service worker or whatever is being used there.