[Bug]: Issue with Chromatic Turbosnap in a monorepo setup using "workingDir" ?

[patricklafrance]

Version

System:
    OS: Windows 11 10.0.26200
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
    Memory: 10.78 GB / 31.62 GB
  Browsers:
    Chrome: 143.0.7499.147
    Edge: Chromium (142.0.3595.69)
    Firefox: 146.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.7309

I am using `storybook-react-rsbuild` version `3.2.0`.

Details

Hello!

I am hopeless to solve my Chromatic issue, so I am creating an issue here hoping it rings a bell since I am using storybook-react-rsbuild and it could be the source of my issue, similarly to #332 a few months ago.

I am working on a monorepo POC with multiple Storybook applications:

/apps
   /home
       /core
       /modules
             /management  
       /storybook   <-----
/packages
   /components
   /storybook    <-----

Those Storybook applications are using rsbuild + storybook-react-rsbuild and are configured to use Chromatic:

{
    "$schema": "https://www.chromatic.com/config-file.schema.json",
    "projectId": "Project:694091b0077ec66d8a8497d8",
    "storybookBaseDir": "apps/home/storybook",
    "zip": true
}

Some cases works fine, but there's a specific use in which I update a component in the /packages/components package and Chromatic is not detecting the change.

According to the following job log: https://github.com/patricklafrance/sg-next-architecture/actions/runs/20388646685/job/58594360161?pr=55 (section Chromatic - Packages), the problem seems to be that Chromatic cannot find the storybook-config-entry.js file:

03:44:27.455 Not found: /home/runner/work/sg-next-architecture/sg-next-architecture/packages/storybook/storybook-config-entry.js

I am wondering if that could be an issue with storybook-react-rsbuild ?

My repository is open source but requires at least a free Chromatic account to reproduce.

Reproduce link

https://github.com/patricklafrance/sg-next-architecture

Reproduce Steps

• Clone the repository and install the dependencies
• Change the text of the /packages/components/HelloWorld.tsx component for something like Hello World435346465487!
• Using a terminal, go to the packages/storybook folder and execute the following command: pnpm dlx chromatic --project-token YOUR-TOKEN --working-dir packages/storybook --only-changed --debug
• In the terminal log, you should see something like: Not found: C:\XYZ\sg-next-architecture\packages\storybook\storybook-config-entry.js

WARNING:

• For Turbosnap to be enabled for a Chromatic project, the project must have at least 10 builds.
• Make sure you only change the /packages/components/HelloWorld.tsx file when reproducing the issue. When updated, some files like package.json files will disable Turbosnap.

[patricklafrance]

Tagging @ethriel3695 if by any chance you know what's going on!

[fi3ework]

i just returned from vacation, thank you for the very detailed reproduction steps. i will take some time to investigate the cause.

i'm curious if there are any patterns in these failed cases (since it's not like #332 where they all fail). you mentioned workingDir in the title, do you suspect it's related?

[patricklafrance]

Hey @fi3ework!

That would be my assumption that the issue comes from specifying a workingDir as our other repositories with a single Storybook application at the root of the workspace (and therefore not using the workingDir option) seems to work fine.

[fi3ework]

@patricklafrance

i haven't fully succeeded in reproducing this issue, possibly due to the turbosnap configuration. i haven't been able to find the not found log.
however, after communicating with the LLM, it believes, after reviewing the stats, that the error is caused by the name related to concatenatedModule in the stats, and it provided a workaround as follows: disable module concatenation in the rsbuild configuration:

// rsbuild.config.ts or .storybook/main.ts
rsbuildFinal: (config) => {
  config.tools = config.tools || {};
  config.tools.rspack = config.tools.rspack || {};
  config.tools.rspack.optimization = {
    ...config.tools.rspack.optimization,
    concatenateModules: false,
  };
  return config;
}

you can try it to see if it works. if it does, it should be a problem with Rspack stats, and we will try to investigate. i'm not familiar with the logic of stats, so maybe this is a bug that's not aligned with webpack, or maybe webpack works the same way. this requires more investigation.

[patricklafrance]

Hey @fi3ework,

I gave it a try and and i still get:

Not found: /home/runner/work/sg-next-architecture/sg-next-architecture/packages/storybook/storybook-config-entry.js

Here's the action logs: https://github.com/patricklafrance/sg-next-architecture/actions/runs/20541149678/job/59005590099

Here's the Storybook main.ts file with the rsbuildFinal changes: https://github.com/patricklafrance/sg-next-architecture/blob/main/packages/storybook/.storybook/main.ts#L17

[fi3ework]

@patricklafrance

i believe another bug is preventing you from disabling concatenateModules. since @workleap/rsbuild-configs already defines a tools.rspack function, the configuration at line 17 of your Storybook main.ts likely isn't taking effect.

i tried toggling the comment on that line and found that the final Storybook output size remained unchanged. this confirms that the setting isn't being applied.

please try adding this option directly to the tools.rspack section within @workleap/rsbuild-configs to verify if concatenateModules is the cause.

the fact that this option fails to work within rsbuildFinal is a separate issue, which I will look into fixing.

[fi3ework]

.storybook/main.ts should be write like below as the passed rspackConfig is a array at that time.

import { mergeRsbuildConfig } from "@rsbuild/core";
rsbuildFinal: config => {
    return mergeRsbuildConfig(config, {
        tools: {
            rspack: {
                optimization: {
                    concatenateModules: false,
                },
            },
        },
    });
}

[patricklafrance]

Hey @fi3ework,

I am almost having tears of joy!!! It fixes the issue 🥇

Here's the PR to prove it: patricklafrance/sg-next-architecture#63.

An interesting observation is that the log still shows: 17:50:47.025 Not found: /home/runner/work/sg-next-architecture/sg-next-architecture/packages/storybook/storybook-config-entry.js (https://github.com/patricklafrance/sg-next-architecture/actions/runs/20579182536/job/59102831116?pr=63#step:11:110), but disabling modules concatenation does fix Chromatic's Turbosnap feature.

Thank you very much, I have been dealing with this issue for so long 🙏🏻

Out of curiosity, may I asked what has been your process to figure out the issue with the help of an LLM? I have been trying as well to find the issue using different LLMs and it never mentionned this solution.

Thank you,

Patrick

[fi3ework]

Out of curiosity, may I asked what has been your process to figure out the issue with the help of an LLM? I have been trying as well to find the issue using different LLMs and it never mentionned this solution.

• opencode + Claude Opus 4.5
• start session at storybook-rsbuild repository with GitHub MCP to analysis this issue directly
• let agent to search possible related issue in storybook and chromatic repository with GitHub MCP
• then cloned the reproduction repository in another place to let agent to investigate
• then it comes to the conclusion

but disabling modules concatenation does fix Chromatic's Turbosnap feature.

this is indeed a workaround, but the problem still exists. i will try to build a minimal reproduction to report this potential issue to Rspack.