Preview intermittently disappears from Canvas

[andfinally]

Describe the bug This may be similar to https://github.com/storybookjs/storybook/issues/9412. I've been getting previews fine, but this morning they stopped appearing in the Canvas tab and refused to come back for quite a while. (Actually, they were appearing and disappearing almost immediately when the page loaded.) I'm back to normal now, just wanted to log this in case it happens to anybody else.

• Checking in devtools, the elements for the preview didn't seem to be there.
• When I viewed the page in a different FF session container, or in a different browser, I could see the preview fine.
• When I switched to Responsive Design Mode in FF dev tools and chose a different viewport size, the preview reappeared, and when I exited dev tools it remained visible.
• I tried disabling the Docs addon by commenting out "@storybook/addon-docs" in the addons array in main.js, restarting Storybook and reloading the page, but it didn't make a difference.
• I also tried emptying node_modules and rerunning npm install.

To Reproduce Steps to reproduce the behavior:

1. Load the Storybook local page at http://localhost:6006/.
2. Click on one of the stories in the sidebar.

Expected behavior The component preview appears as normal in the Canvas tab.

Screenshots

Code snippets main.js:

const path = require( 'path' );

module.exports = {
    "stories": [
        '../themes/mytheme/components/**/stories/*.@(js|mdx)',
    ],
    "addons": [
        "@storybook/addon-docs",
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-postcss"
    ],
    webpackFinal: async ( config ) => {
        config.module.rules.push( {
            test: /\.scss$/,
            use: [ 'style-loader', 'css-loader', 'sass-loader' ],
            include: path.resolve( __dirname, '../' ),
        } );

        return config;
    },
    // Adds React import to built JS modules
    babel: async ( options ) => ( {
        ...options,
        "plugins":
            [
                "react-require"
            ],
    } ),
};

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 87.0
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-actions: ^6.2.7 => 6.2.7
    @storybook/addon-docs: ^6.2.7 => 6.2.7
    @storybook/addon-essentials: ^6.2.7 => 6.2.7
    @storybook/addon-links: ^6.2.7 => 6.2.7
    @storybook/addon-postcss: ^2.0.0 => 2.0.0
    @storybook/react: ^6.2.7 => 6.2.7

Additional context Add any other context about the problem here.

[shilman]

Do you have a repro repo you can share?

[andfinally]

Thanks @shilman, unfortunately it's a private one, but I just had four very basic stories – please see attached.

storybook.zip

[mjimenezbc]

@andfinally did you fix it? I have the same issue

[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!