Chromatic + TurboSnap cannot find the base directory

[TheGreatLebowski]

Hello,

I'm actually working on a monorepo with this structure :

monorepo -- storybook -- nextjs -- components

In my storybook package.json I use theses scripts :

    "build-storybook": "storybook build",
    "chromatic": "chromatic --project-token=$CHROMATIC_TOKEN --exit-zero-on-changes --only-changed"

I also have a chromatic.config.json file :

{
  "buildScriptName": "build-storybook",
  "debug": true,
  "projectId": "Project:64ff2159f709623d8074467d",
  "zip": true,
  "storybookBaseDir": "tools/storybook"
}

Sometimes it works, sometimes not.

I tried to change the chromatic script adding --storybook-base-dir=./monorepo/storybook (Even if it's defined in my chromatic config file)

Here the error I am facing :

  ✖ Retrieving story files affected by recent changes
    → Run @chromatic-com/turbosnap-helper to get your base directory value.

14:14:24.136  git info: {"commit":{"commit":"d4cd24ae78e116010a94f123fab5935726767769","committedAt":1714399527000,"committerEmail":"MAIL","committerName":"PSEUDO"},"branch":"feat/run-ci-only-on-master","fromCI":false}

14:14:25.926  App firstBuild: %o, lastBuild: %o {"committedAt":1695026683000} {"commit":"fbf499c79fd44afd54edb96b58e2915f7a0c1cf5","committedAt":1714146792000}

14:14:25.941  Adding last branch build commit fbf499c79fd44afd54edb96b58e2915f7a0c1cf5 to commits with builds

14:14:25.941  step: checking 20 up to 1695026683

14:14:25.941  step: commitsWithBuilds: fbf499c79fd44afd54edb96b58e2915f7a0c1cf5

14:14:25.941  step: commitsWithoutBuilds: 

14:14:25.941  running git rev-list HEAD       --since 1695026683       -n 20 --not fbf499c79fd44afd54edb96b58e2915f7a0c1cf5

14:14:25.953  command output: d4cd24ae78e116010a94f123fab5935726767769

14:14:25.953  step: candidateCommits: d4cd24ae78e116010a94f123fab5935726767769, visitedCommitsWithoutBuilds: d4cd24ae78e116010a94f123fab5935726767769

14:14:26.383  step: newCommitsWithBuilds: d4cd24ae78e116010a94f123fab5935726767769

14:14:26.383  step: checking 40 up to 1695026683

14:14:26.383  step: commitsWithBuilds: fbf499c79fd44afd54edb96b58e2915f7a0c1cf5,d4cd24ae78e116010a94f123fab5935726767769

14:14:26.383  step: commitsWithoutBuilds: 

14:14:26.383  running git rev-list HEAD       --since 1695026683       -n 40 --not fbf499c79fd44afd54edb96b58e2915f7a0c1cf5 d4cd24ae78e116010a94f123fab5935726767769

14:14:26.405  command output: 

14:14:26.405  step: candidateCommits: , visitedCommitsWithoutBuilds: 

14:14:26.405  step: no candidateCommits; we are done

14:14:26.835  Final commitsWithBuilds: fbf499c79fd44afd54edb96b58e2915f7a0c1cf5,d4cd24ae78e116010a94f123fab5935726767769

14:14:26.835  running git rev-list fbf499c79fd44afd54edb96b58e2915f7a0c1cf5 d4cd24ae78e116010a94f123fab5935726767769 --not "fbf499c79fd44afd54edb96b58e2915f7a0c1cf5^@" "d4cd24ae78e116010a94f123fab5935726767769^@"

14:14:26.858  command output: d4cd24ae78e116010a94f123fab5935726767769,fbf499c79fd44afd54edb96b58e2915f7a0c1cf5

14:14:26.858  Found parentCommits: d4cd24ae78e116010a94f123fab5935726767769, fbf499c79fd44afd54edb96b58e2915f7a0c1cf5

14:14:28.988  Found baselineCommits: fbf499c79fd44afd54edb96b58e2915f7a0c1cf5, 07fc101e26ae35a4bacbb2bddc244183f9a048cd

14:14:29.059  [{"status":"rejected","reason":{}},{"status":"fulfilled","value":{}},{"status":"fulfilled","value":{"viewLayer":"react","version":"8.0.9"}},{"status":"rejected","reason":{}}]

14:14:29.060  Got environment:
              {}

14:14:30.048  Running build command: pnpm run build-storybook --output-dir /var/folders/y8/qj0m21010mnd4gtttj9jw_lm0000gn/T/chromatic--21649-BvEFA1s4GauC --webpack-stats-json /var/folders/y8/qj0m21010mnd4gtttj9jw_lm0000gn/T/chromatic--21649-BvEFA1s4GauC

14:14:30.048  Runtime metadata: {
                "nodePlatform": "darwin",
                "nodeVersion": "20.12.2",
                "packageManager": "pnpm",
                "packageManagerVersion": "8.8.0"
              }

14:14:40.361  Storybook base directory: ./tools/storybook

14:14:40.364  Not found: tools/storybook/storybook-stories.js

(I have the Not found error a with a lot of files, deleted them for readability)

14:14:40.365  ✖ TurboSnap disabled until base directory is set correctly
              The base directory allows TurboSnap to trace files.
              Set the --storybook-base-dir option as the relative path from the repository root to the Storybook project root.
              Run @chromatic-com/turbosnap-helper to get your base directory value.
14:14:40.378  ℹ Wrote Chromatic diagnostics report to chromatic-diagnostics.json

The error always seems to be from the base directory, but I tried different ways to defined it, I still have this error, any ideas ? 🙏

[gestureleft]

I was facing this issue also. Specifying the storybookBaseDir input of the chromaui/action@v1 action fixed this issue for me.

[olegmanby]

The same issue

[ethriel3695]

HI @TheGreatLebowski @olegmanby ,

@gestureleft is correct. If you set the storybookBaseDIr, the error will go away. This change was made to prevent TurboSnap from running too many snapshots or even worse, skipping visual regressions in the situation where you have a Monorepo and run Storybook in a subdirectory.

[kamleshchandnani]

@ethriel3695 but the docs says if the base dir is same we don't need to mention, chromatic will auto detect 🤔

[chris-erickson]

This doesn't appear to be documented, I happened to figure out the proper syntax by digging in the code. But, still not working for me.

This doesn't entirely make sense:

description: 'Relative path from repository root to Storybook project root'

which for me would be storybookBaseDir: packages/site/.storybook

But, running pnpx @chromatic-com/turbosnap-helper (in the website root) yields

║   📙 Storybook Base Directory: .                      ║
║         📂 Storybook Config Directory: ./.storybook   ║
║         🧰 Package Manager: pnpm                      ║
║         📝 Framework: @storybook/nextjs'),            ║
║     options: {                                        ║
║       builder: {},                                    ║
║     },                                                ║
║   } 

or run from the top-level yields

║   📙 Storybook Base Directory: ./packages/site                      ║
║         📂 Storybook Config Directory: ./packages/site/.storybook   ║
║         🧰 Package Manager: pnpm                                    ║
║         📝 Framework: @storybook/nextjs'),                          ║
║     options: {                                                      ║
║       builder: {},                                                  ║
║     },                                                              ║
║   }  

Would be nice if the tool could understand which I actually want..?

Using .storybook or ./packages/site/.storybook don't work.

Was this introduced here? https://github.com/chromaui/chromatic-cli/pull/974

Any way to pin to a specific version of things to keep moving while sorting this out?

[repomadness]

Would be nice if the tool could understand which I actually want..?

We tried to eliminate a lot of the guesswork with the tool, but it's not perfect. You'll want to run the turbosnap-helper from the repo root, which shows the Storybook Base Directory as ./packages/site based on the example you gave from your top-level.

Using .storybook or ./packages/site/.storybook don't work.

It looks like there's a bit of a mix-up here, since ./packages/site/.storybook is your config dir. You'll want to set your Storybook base dir like such: storybookBaseDir: packages/site

Was this introduced here? #974

Correct; this change was introduced in the PR mentioned.

Any way to pin to a specific version of things to keep moving while sorting this out?

You can absolutely pin a CLI version if you hit a blocker like this while you get it sorted out! If you're looking to pin a specific version, you can follow this syntax example: chromaui/[email protected]

[repomadness]

@ethriel3695 but the docs says if the base dir is same we don't need to mention, chromatic will auto detect 🤔

We'll need to make this change to our docs since this is no longer the expected behavior. Prior to #974, the storybookBaseDir was checked as a relative path. This caused some unintended side effects if you ran Storybook from a subdirectory, which is why the PR was introduced to ensure we check the storybookBaseDir value against the repo root instead of the cwd.

[chris-erickson]

Thank you @repomadness! Setting storybookBaseDir: packages/site as you noted is it!

[repomadness]

@chris-erickson perfect!! 🙌 Glad that did the trick.

One of our Engineers is working on #976 so I wanted to leave this as a reference for anyone else who stumbles across this thread in the meantime.