Storybook cannot build with yarn4 pnp in Github Actions

[lilnamcor]

The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:
             
             - Check the Storybook build log printed below.
             - Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
             - Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook
             
             Command failed with exit code 1: yarn run build-storybook --output-dir=/tmp/chromatic--1962-2X2jXG5MMlDV --webpack-stats-json=/tmp/chromatic--1962-2X2jXG5MMlDV
             The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
             
             ℹ Build command:
             yarn run build-storybook --output-dir=/tmp/chromatic--1962-2X2jXG5MMlDV --webpack-stats-json=/tmp/chromatic--1962-2X2jXG5MMlDV
             
             ℹ Runtime metadata:
             {
               "nodePlatform": "linux",
               "nodeVersion": "20.19.0",
               "packageManager": "yarn",
               "packageManagerVersion": "4.7.0"
             }
             
             ℹ Storybook build output:
             /home/runner/work/chromaui-test/chromaui-test/build-storybook.log
             
             @storybook/core v8.6.12
             
             info => Cleaning outputDir: ../../../../../tmp/chromatic--1962-2X2jXG5MMlDV
             info => Loading presets
             info => Building manager..
             info => Manager built (3[34](https://github.com/lilnamcor/chromaui-test/actions/runs/14279763746/job/40027829850#step:6:35) ms)
             info => Building preview..
             => Failed to build the preview
             Error: Cannot find module '/home/runner/.yarn/berry/cache/react-docgen-npm-7.1.1-0530992ae8-10c0.zip/node_modules/react-docgen/dist/config.js' imported from /home/runner/.yarn/berry/cache/react-docgen-npm-7.1.1-0530992ae8-10c0.zip/node_modules/react-docgen/dist/main.js
                 at finalizeResolution (node:internal/modules/esm/resolve:283:11)
                 at moduleResolve (node:internal/modules/esm/resolve:952:10)
                 at defaultResolve (node:internal/modules/esm/resolve:1188:11)
                 at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:642:12)
                 at #cachedDefaultResolve (node:internal/modules/esm/loader:591:25)
                 at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:347:53)
                 at new ModuleJobSync (node:internal/modules/esm/module_job:333:34)
                 at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:320:11)
                 at loadESMFromCJS (node:internal/modules/cjs/loader:1[37](https://github.com/lilnamcor/chromaui-test/actions/runs/14279763746/job/40027829850#step:6:38)1:24)
                 at Module._compile (node:internal/modules/cjs/loader:1511:5)

I have looked into all the issues and tried numerous things to try to fix this issue. This issue seemed the most definitive on this fix will work but it did not work for me.

I made a repo to show this error https://github.com/lilnamcor/chromaui-test

Specific link to a failed github action run https://github.com/lilnamcor/chromaui-test/actions/runs/14279743627/job/40027783516

[codykaup]

Thanks for reaching out @lilnamcor!

Does the build work locally? Does it work if you run a yarn build-storybook separately from the Chromatic CLI in your GitHub Action?

[codykaup]

Actually, it looks like it's an issue between Yarn PnP and GitHub Actions. I was able to fix this by disabling PnP in CI (not sure if there's a better fix or not).

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 69f63c9..f3c559b 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -20,6 +20,7 @@ jobs:
           node-version: 20.19.0
       - name: Install dependencies
         run: |
+          yarn config set nodeLinker node-modules
           yarn
       - name: Run Chromatic
         uses: chromaui/action@latest

[lilnamcor]

I guess this is a fix but not a great one. I'll do this for now but hopefully we can have a better fix with PnP in the future

[codykaup]

For some context, the root issue is with running yarn build-storybook and not in the Chromatic CLI.

It looks like issues similar to this have appeared off and on in the Storybook repo. From what I've seen, the Storybook team has been able to fix these. I would recommend heading over there to see if they can help you out.