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.

Sign up for GitHub

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

Jump to bottom

Webpack5: storybook blank with node_modules cache on second start #14152

Closed
scottdickerson opened this issue Mar 5, 2021 · 4 comments
Closed

Webpack5: storybook blank with node_modules cache on second start #14152

scottdickerson opened this issue Mar 5, 2021 · 4 comments
Labels
bug builder-webpack5 needs reproduction

Comments

@scottdickerson
Copy link

Describe the bug
On first startup of the storybook, everything works correctly using webpack 5 resolutions according to the gist (and the additional gist configs). However on second startup for me, the page stays blank and doesn't render the manager. We noticed that if we delete the node_modules/.cache, the storybook works correctly again.

To Reproduce
Steps to reproduce the behavior:

Use 6.2.0-beta.9 of storybook
Start it up twice

Expected behavior
Continues to work after initial load

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
Here's my babel-loader config

       test: /\.(js|jsx|ts|tsx)$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',
         options: { cacheDirectory: true, cacheCompression: false },
       },
     },

The storybook updates to support webpack5 in the manager build

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: ['../**/*.story.jsx'],
  addons: [
    '@storybook/addon-knobs',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-a11y',
    'storybook-addon-rtl',
    'storybook-formik',
  ],
  // This merges storybooks default webpack with our standard webpack configuration
  webpackFinal: async (config, { configType }) => {
    const mergedWebpackConfig = {
      ...custom,
      ...omit(config, 'cache', 'devtool'),
      resolve: custom.resolve,
      plugins: [...config.plugins, ...custom.plugins],
      module: { ...config.module, rules: custom.module.rules },
    };
    // console.log(JSON.stringify(mergedWebpackConfig, null, 2));
    return mergedWebpackConfig;
  },
};

System
Environment Info:

System:
OS: macOS 11.2.2
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
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: 88.0.4324.192
Firefox: 86.0
Safari: 14.0.3
npmPackages:
@storybook/addon-a11y: ^6.2.0-beta.9 => 6.2.0-beta.9
@storybook/addon-actions: ^6.2.0-beta.9 => 6.2.0-beta.9
@storybook/addon-knobs: ^6.2.0-beta.9 => 6.2.0-beta.9
@storybook/addon-links: ^6.2.0-beta.9 => 6.2.0-beta.9
@storybook/addon-storyshots: ^6.2.0-beta.9 => 6.2.0-beta.9
@storybook/addons: ^6.2.0-beta.9 => 6.2.0-beta.9
@storybook/builder-webpack5: ^6.2.0-beta.9 => 6.2.0-beta.9
@storybook/react: ^6.2.0-beta.9 => 6.2.0-beta.9
@storybook/theming: ^6.2.0-beta.9 => 6.2.0-beta.9

Additional context
Add any other context about the problem here.
@shilman
Copy link
Member

shilman commented Mar 19, 2021

Do you have a repro repo you can share?

@scottdickerson
Copy link
Author

scottdickerson commented Mar 19, 2021 •
edited
Loading

I wish I could share ours, unforunately ours is a private Github Enterprise project. I also see errors between Hot Module Reloading and our Mini CSS Extract Plugin on rebuilds within the first startup. Not sure if they're related to the secondary startup issue. Is there anyway to tweak the storybook manager cache settings with an option so I could try out multiple options and get more info? like I could do with this:

core: {
    builder: 'webpack5',
  },

@scottdickerson
Copy link
Author

I had the chance to debug this some more today. When running the development build of storybook. It seems like the index.html file written to the node_modules/.cache/storybook is incorrect, missing a lot of the bootstrap information. This is why removing the node_modules/.cache/storybook between builds fixes the problem. Here's my built index.html file. I think this only fails the second time because the invalid index.html file gets picked up from the .cache instead of using the dynamically generated one from webpack and that invalid one is the one served to the browser.

<!DOCTYPE html>

<html><head><link rel="icon" href="favicon.ico"><script defer="defer" src="runtime~main.iframe.bundle.js"></script><script defer="defer" src="vendors-node_modules_babel_runtime_helpers_applyDecoratedDescriptor_js-node_modules_babel_run-0f3d60.iframe.bundle.js"></script><script defer="defer" src="main.iframe.bundle.js"></script><link href="styles/vendors-node_modules_babel_runtime_helpers_applyDecoratedDescriptor_js-node_modules_babel_run-0f3d60.740c49c33b2459cc9401.css" rel="stylesheet"><link href="styles/main.ae01af936a4e752ebaa4.css" rel="stylesheet"></head>
  <body>
    <div id="mount"></div>
  </body>
</html>

@scottdickerson
Copy link
Author

I figured it out. We are merging our webpack.config.js and the storybook one, and one of our plugins specifically the HTMLWebpackPlugin was overriding storybooks config. Our index.html file was being swapped into the storybook cache and storybook is looking for a div id="root" to put all it's bootstrapping information in. Removing our custom plugin from the merged webpack.config fixed the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug builder-webpack5 needs reproduction
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@shilman @scottdickerson