[Bug]: v0.1.7 fails when run via chromatic in CI

[itd-cba]

Details

After upgrading to 0.1.7 our chromatic jobs fail with the following error message. A downgrade to v0.1.6 resolves the problem entirely. I could not determine what the root cause is, but maybe it has something to do with the cache dir change made in v0.1.7.

The problem only appears when the chromatic task is run by the CI. When its triggered locally everything runs fine.

Here is the error message:

Initialized build
    → Build 5706 initialized
Building your Storybook
    → Running command: pnpm run build-storybook --output-dir=/tmp/chromatic--531-Lz51To2bcrxL --webpack-stats-json=/tmp/chromatic--531-Lz51To2bcrxL
    → [*                   ]
    → [ *                  ]
Storybook built in 16 seconds
    → View build log at /home/runner/_work/mp-resourceroadrunner/mp-resourceroadrunner/service/microfrontend/build-storybook.log
Publish your built Storybook
    → Validating Storybook files
Retrieving story files affected by recent changes
    → Traversing dependencies for 1 file that changed since the last build
✖ Did not find any CSF globs in /tmp/chromatic--531-Lz51To2bcrxL/preview-stats.json
Check your stories configuration in service/microfrontend/.storybook/main.js
Failed to retrieve dependent story files
ℹ Read more at https://storybook.js.org/docs/react/configure/overview
    → Could not retrieve dependent story files.
Did not find any CSF globs in preview-stats.json

✖ Failed to publish your built Storybook
Could not retrieve dependent story files.
Did not find any CSF globs in preview-stats.json
→ View the full stacktrace below

If you need help, please chat with us at https://www.chromatic.com/docs/cli for the fastest response.
You can also email the team at [email protected] if chat is not an option.

Please provide us with the above CLI output and the following info:
{
  "timestamp": "2025-01-08T13:41:55.515Z",
  "sessionId": "2d00d4a6-679e-47af-89b0-d52c4300c6a5",
  "gitVersion": "2.47.1",
  "gitBranch": "feature/KNUTH-109819",
  "gitSlug": "itdesign-gmbh/mp-resourceroadrunner",
  "fromCI": true,
  "ciService": "github",
  "nodePlatform": "linux",
  "nodeVersion": "20.18.1",
  "packageManager": "pnpm",
  "packageManagerVersion": "9.15.3",
  "packageName": "chromatic",
  "packageVersion": "11.20.2",
  "storybook": {
    "addons": [
      {
        "name": "actions",
        "packageName": "@storybook/addon-actions",
        "packageVersion": "^8.4.7"
      },
      {
        "packageName": "@storybook/addon-toolbars",
        "packageVersion": "^8.4.7"
      },
      {
        "name": "interactions",
        "packageName": "@storybook/addon-interactions",
        "packageVersion": "^8.4.7"
      }
    ],
    "configDir": ".storybook",
    "viewLayer": "react",
    "version": "8.4.7",
    "builder": {
      "name": "storybook-react-rsbuild",
      "packageVersion": "0.1.7"
    },
    "baseDir": "service/microfrontend"
  },
  "flags": {
    "onlyChanged": "",
    "exitZeroOnChanges": "",
    "outputDir": [],
    "storybookBuildDir": [],
    "externals": [],
    "onlyStoryFiles": [],
    "onlyStoryNames": [],
    "untraced": [],
    "fileHashing": true,
    "interactive": true,
    "appCode": []
  },
  "configuration": {},
  "buildScript": "storybook build -c .storybook -o storybook",
  "buildCommand": "pnpm run build-storybook --output-dir=/tmp/chromatic--531-Lz51To2bcrxL --webpack-stats-json=/tmp/chromatic--531-Lz51To2bcrxL",
  "exitCode": 0,
  "exitCodeKey": "OK",
  "errorType": "Error",
  "errorMessage": "✖ Failed to publish your built Storybook",
  "build": {
    "id": "677e75a74cfb19e0fbf5c811",
    "number": 5701
  }
}

Error: Could not retrieve dependent story files.
Did not find any CSF globs in preview-stats.json
    at Object.ms [as Q] (/home/runner/_work/mp-resourceroadrunner/mp-resourceroadrunner/service/microfrontend/node_modules/.pnpm/[email protected]/node_modules/chromatic/dist/chunk-DAVAFWE5.js:86:2182)
    at lHi (/home/runner/_work/mp-resourceroadrunner/mp-resourceroadrunner/service/microfrontend/node_modules/.pnpm/[email protected]/node_modules/chromatic/dist/chunk-44755G5U.js:1311:387)
    at async Kae.task (/home/runner/_work/mp-resourceroadrunner/mp-resourceroadrunner/service/microfrontend/node_modules/.pnpm/[email protected]/node_modules/chromatic/dist/chunk-44755G5U.js:949:[255](https://github.com/itdesign-gmbh/mp-resourceroadrunner/actions/runs/12671723795/job/35314096850?pr=1891#step:7:256)5)
 ELIFECYCLE  Command failed with exit code 255.
make: *** [Makefile:22: microfrontend-chromatic] Error 255

[fi3ework]

The problem only appears when the chromatic task is run by the CI. When its triggered locally everything runs fine.

Due to the description, #196 might be the cause but I don't know why. I'm not familiar with Chromatic, either. Could you provide a minimal reproduction so we can debug it in a Linux environment?

You could prefix your command with CI=1 on your local device to trigger the CI-specific logic. For example, use CI=1 pnpm build:storybook to see if it works locally.

[etripier]

I ended up having to do CACHE_DIR=./node_modules/.cache/storybook storybook build, FWIW. Yes, the issue is due to the linked PR that flattened the cache directory namespace.

[etripier]

The Chromatic team could also fix this by adding something like https://github.com/chromaui/chromatic-cli/pull/1110/files#diff-788a73045dad6838b61028993c01fdd65c7ea28c9b1da0a91cc7d5caeb50f9cfR144 - specifically, ./node_modules/.cache/storybook-rsbuild-builder/storybook-config-entry.js (note the shallow namespace).

[fi3ework]

@etripier Thanks for the inspection, I'll revert the path at first (keep using find-cache-dir).