Storybook fully recompiles on file change

[kirillbashtenko]

Hi, not sure if it's exactly rsbuild issue, but for me when I save one file it recompiles all of them, considering 55 packages it's quite some time. I tried the Vite plugin for the storybook, and it only updates the affected file.

// main.ts
import { dirname, join } from "path";
const path = require("path");

module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": "@swc/jest",
  },
  stories: ["../packages/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
   "@storybook/addon-actions",
    "@storybook/addon-a11y",
    "@storybook/addon-controls",
    "@storybook/addon-toolbars",
  ],
  framework:"storybook-react-rsbuild",
  rsbuildFinal: (config) => {
    config.output ??= {};
    config.output.assetPrefix = "/myproject/";
    return config;
  },
  typescript: {
    reactDocgen: false,
  },
};

// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginSvgr } from "@rsbuild/plugin-svgr";

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginSvgr({
      svgrOptions: {
        exportType: "default",
        svgoConfig: {
          plugins: [
            {
              name: "preset-default",
              params: {
                overrides: {
                  removeViewBox: false,
                  inlineStyles: {
                    onlyMatchedOnce: false,
                  },
                  cleanupIds: false,
                },
              },
            },
          ],
        },
      },
    }),
  ],
});

Thank you!

[fi3ework]

Could you provide a minimal reproduction and the repeat path please? And how do you recognize that all the files are recompiled (under the hood, in Rspack architecture, you could say they're recompile and that is by design).

[kirillbashtenko]

@fi3ework So, I started digging with Rsdoctor, and my initial assumption was wrong. Sometimes, it just stuck for an unreasonable amount of time on several files.

Could it be connected to this one?

I am not sure about reproduction. I have cloned the storybook-rebuild repo, and with minimal examples, it works fine. Also, I use modern.js for medium-sized projects and don't have issues there, only with Storybook.

[fi3ework]

@kirillbashtenko Does this workaround also works for you web-infra-dev/rspack#7490 (comment)?

[kirillbashtenko]

@fi3ework No, unfortunately, no.
( I've cloned both rspack and rsbuild and after changing the code and build linked to rsbuild and rsbuild to my project )

What else we can try or debug?

[fi3ework]

You could try to remove the following code I guess, I don't know what it does.

-  transform: {
-    "^.+\\.(t|j)sx?$": "@swc/jest",
-  },

And, TBH, I'm not sure what caused the issue, it's weird that takes swc-loader so much time. Could you provide a minimal reproduction if possible (It's okay if it's not small enough, as long as it can be reproduced）

[kirillbashtenko]

@fi3ework invited you in a repo ( made it private in case I missed something company-related, but it should generally be good).

[fi3ework]

I'll check it later today.

[kirillbashtenko]

@fi3ework any luck? is it reproducible for you?

[kirillbashtenko]

bump

[puiks]

same issue for me

[fi3ework]

@kirillbashtenko sorry for the late response, i think #329 has a chance to resolve this issue, could you tell me how to reproduce the stuck in https://github.com/kirillbashtenko/storybook-rsbuild-issue?

[kirillbashtenko]

@fi3ework just change and save one of the files in packages and see how long it takes for HMR.

[fi3ework]

i can't launch Storybook successfully due to the following issue, can you give a try of 2.1.0 (which requires @rsbuild/core 1.5.0) which may resolve this issue.