[Bug]: Page reloading in cycles after upgrading to storybook 7 with webpack 5

[Rajdeepc]

Describe the bug

Page reloading in cycles after upgrading to storybook 7 with webpack 5

https://github.com/storybookjs/storybook/assets/8790510/99c6345f-8c8d-4148-980d-30b810a37e7e

To Reproduce

It a private repo.

But I have the following configs.

main.js

  framework: {
    name: '@storybook/web-components-webpack5',
    options: {
      fastRefresh: true,
      builder: { lazyCompilation: true },
    },
  },
  features: {
    postcss: false,
    /* Code splitting flag; load stories on-demand */
    storyStoreV7: true,
    /* Builds stories.json to help with on-demand loading */
    buildStoriesJson: true,
  },
  docs: {
    autodocs: true, // see below for alternatives
    defaultName: 'Docs', // set to change the name of generated docs entries
  },

package.json

  "@etchteam/storybook-addon-status": "^4.2.4",
    "@spectrum-css/component-builder": "^4.0.9",
    "@storybook/addon-a11y": "^7.0.12",
    "@storybook/addon-actions": "^7.0.12",
    "@storybook/addon-console": "^1.2.3",
    "@storybook/addon-docs": "^7.0.12",
    "@storybook/addon-essentials": "^7.0.12",
    "@storybook/api": "^7.0.12",
    "@storybook/client-api": "^7.0.12",
    "@storybook/components": "^7.0.12",
    "@storybook/core-events": "^7.0.12",
    "@storybook/manager-api": "^7.0.12",
    "@storybook/preview-api": "^7.0.12",
    "@storybook/theming": "^7.0.12",
    "@storybook/web-components-webpack5": "^7.0.12",
    "storybook": "^7.0.12",
    "lit": "^2.7.4",
    "lit-html": "^2.7.4",
    "style-loader": "3.3.3",
    "webpack": "^5.83.1"

Additional context

No response

[Rajdeepc]

Checked this today and found out webpack 5 continuously downloading sets of assets mostly .js on any mouse events(hover, scroll or click). When I am not doing any mouse movements it doesn't download.

This happens when I hover or click on the sideNav. hovering, clicking on the right nav works fine.

May be issue is here?

webpackFinal: function (config) {
    // Removing the global alias as it conflicts with the global npm pkg
    const { global, ...alias } = config.resolve.alias
    config.resolve.alias = alias
    let storybookRules =
      config && config.module && config.module.rules
        ? config.module.rules.filter(
          (rule) => !(rule.test && rule.test.toString().includes('css'))
        )
        : []
    return {
      ...config,
      stats: {
        /* Suppress autoprefixer warnings from storybook build */
        warningsFilter: [/autoprefixer: /],
      },
      /* Add support for root node_modules imports */
      resolve: {
        ...(config.resolve ? config.resolve : {}),
        modules: [
          ...(config.resolve ? config.resolve.modules : []),
          resolve(__dirname, '../../node_modules'),
        ],
        alias: {
          ...(config.resolve ? config.resolve.alias : {}),
          ...componentPkgs.reduce((pkgs, dir) => {
            const pkg = require(resolve(componentsPath, dir, 'package.json'))
            pkgs[pkg.name] = resolve(componentsPath, dir)
            return pkgs
          }, {}),
        },
      },
      module: {
        ...(config.module ?? []),
        rules: [
          ...storybookRules,
          {
            test: /^\w+\.{ico,jpg,jpeg,png,gif,webp}$/i,
            use: [
              {
                loader: 'file-loader',
                options: {
                  outputPath: (url, resourcePath, context) => {
                    return `assets/images/${url.replace(/_\//g, '')}`
                  },
                },
              },
            ],
          },
          {
            test: /\.css$/i,
            sideEffects: true,
            use: [
              {
                loader: 'style-loader',
                options: {
                  injectType: 'linkTag',
                  attributes: {
                    'data-source': 'processed',
                  },
                },
              },
              {
                loader: 'file-loader',
                options: {
                  name: '[path][name].[ext][query]',
                  outputPath: (url, resourcePath, context) => {
                    return `assets/css/${url.replace(/_\//g, '')}`
                  },
                  esModule: false,
                },
              },
              {
                loader: 'postcss-loader',
                options: {
                  implementation: require('postcss'),
                  postcssOptions: {
                    config: resolve(__dirname, 'postcss.config.js'),
                  },
                },
              },
            ],
          },
          {
            test: /\.js$/,
            enforce: 'pre',
            use: ['source-map-loader'],
          } /* Raw SVG loader */,
          {
            test: /\.svg$/i,
            loader: 'raw-loader',
          },
        ],
      },
    }
  },

package.json:

"file-loader": "^6.2.0",
 "webpack": "^5.83.1"
 "raw-loader": "^4.0.2",
 "source-map-loader": "^3.0.2",

[shilman]

Any chance you can create a minimal reproduction? Go to https://storybook.new or see repro docs. Thank you! 🙏

[Rajdeepc]

Might be helpful since it is very closer to my issue: https://github.com/webpack/webpack/issues/15541

[Rajdeepc]

Any chance you can create a minimal reproduction? Go to https://storybook.new or see repro docs. Thank you! 🙏

@shilman here you go: https://github.com/Rajdeepc/test-story

I scaffolded the storybook project from my monorepo in this repo. Issue is still there.

[Rajdeepc]

@shilman A quick demo on the issue https://stackblitz.com/github/Rajdeepc/test-story

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions[bot]]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[tmeasday]

@Rajdeepc sorry this one fell off the radar. It seems you reproduction has been removed from the web -- do you still have it?

If not @emiliegervais do you have a reproduction I can look at?

[emiliegervais]

@tmeasday not at the moment, will let you know if we decide to re-deploy it

[emiliegervais]

@Rajdeepc sorry this one fell off the radar. It seems you reproduction has been removed from the web -- do you still have it?

If not @emiliegervais do you have a reproduction I can look at?

@tmeasday a reproduction is available here --> this issue isolates exactly the problem that i have : https://github.com/storybookjs/storybook/issues/28437#issue-2388872716