6.3.3 Did not find any CSF globs in preview-stats.json (It was working with 6.2.3)

We’re using github actions to add Chromatic to our pipeline. It suddenly stopped working today and after some investigation, the only difference is that the CLI version used by the Github Action bumped up from 6.2.3 to 6.3.3.

    → Validating Storybook files
Retrieving story files affected by recent changes
    → Traversing dependencies for 108 files that changed since the last build
✖ Did not find any CSF globs in /tmp/chromatic--1765-AcyfWpX0wn54/preview-stats.json
Check your stories configuration in frontend/.storybook/main.js
Failed to retrieve dependent story files
ℹ Read more at https://storybook.js.org/docs/null/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 [e-mail] if chat is not an option.

Please provide us with the above CLI output and the following info:

{
  "timestamp": "2021-12-22T21:30:26.090Z",
  "sessionId": "3ba52350-0fdc-486b-aec5-418ba46dbb22",

  "gitVersion": "2.34.1",
  "nodePlatform": "linux",

  "nodeVersion": "12.13.1",
  "packageName": "chromatic",

  "packageVersion": "6.3.3",
  "storybook": {
Error: non-zero exit code
    "viewLayer": null,
    "version": null,
    "addons": []
  },
  "flags": {
    "projectToken": "***",
    "workingDir": "frontend",
    "skip": false,
    "onlyChanged": true,
    "fromCI": true,
    "interactive": false,
    "exitZeroOnChanges": true,
    "exitOnceUploaded": false,
    "allowConsoleErrors": false
  },
  "buildScript": "build-storybook",
  "spawnParams": {
    "client": "npm",
    "clientVersion": "8.1.2",
    "nodeVersion": "v16.13.1",
    "platform": "linux",
    "command": "npm",
    "clientArgs": [
      "run",
      "--silent"
    ],
    "scriptArgs": [
      "build-storybook",
      "--",
      "--output-dir",
      "/tmp/chromatic--1765-AcyfWpX0wn54",
      "--webpack-stats-json",
      "/tmp/chromatic--1765-AcyfWpX0wn54"
    ]
  },
  "errorType": "Error",
  "errorMessage": "✖ Failed to publish your built Storybook",
  "build": {
    "number": 271,
    "webUrl": "https://www.chromatic.com/build?appId=6196dd942f4468003ac25bff&number=271"
  }
}

Error: ✖ Failed to publish your built Storybook
Could not retrieve dependent story files.
Did not find any CSF globs in preview-stats.json
    at /home/runner/work/_actions/chromaui/action/v1/action/main.js:188:51
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async /home/runner/work/_actions/chromaui/action/v1/action/main.js:184:133
    at async e.exports.task (/home/runner/work/_actions/chromaui/action/v1/action/main.js:15:1296)

# Workflow name
name: "Chromatic"

# Event for the workflow
on:
  # Chromatic needs the commit sha of master to use as image base for comparisons
  push:
    branches:
      - master
  # Only run if the PR contains changes to frontend/**
  pull_request:
    types: [opened, synchronize]

# List of jobs
jobs:
  chromatic-deployment:
    # Operating System
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    # Job steps
    steps:
      - name: Check if service has changed
        uses: actions/github-script@0.9.0
        id: service-changed
        with:
          result-encoding: string
          script: |
            if (context.eventName == 'push') return false
            const result = await github.pulls.listFiles({
              owner: context.payload.repository.owner.login,
              repo: context.payload.repository.name,
              pull_number: context.payload.number,
              per_page: 100
            })
            const serviceChanged = result.data.filter(f => f.filename.startsWith("frontend/")).length > 0
            console.log(serviceChanged)
            return serviceChanged
      - uses: actions/checkout@v1
      - name: Install dependencies
        run: yarn
        working-directory: frontend
        # Adds Chromatic as a step in the workflow
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Chromatic GitHub Action options
        with:
          workingDir: frontend
          token: ${{ secrets.GITHUB_TOKEN }}
          # Chromatic projectToken, refer to the manage page to obtain it.
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          onlyChanged: true
          skip: ${{ steps.service-changed.outputs.result == 'false' }}

[tmeasday]

Hey @VickyKoblinski, just to jump in for @ghengeveld here as he is away this week. We might need to take a look at your webpack stats file here to debug this. I’ll write the steps here in case it helps others.

1. Firstly, build and trim the stats file, as documented here: https://www.chromatic.com/docs/turbosnap.html#why-are-no-changes-being-detected
2. Next, pick a story file, say A.stories.js, that should be picked up by your stories glob
3. Find it in the stats file. You are looking for a “module” that includes that file [1] 3.a if you can’t find the story file, check a dependency of it (e.g the actual component it references). Is it in there? What are the “reasons” for it to be there?
4. Check the “reasons” listed for that story file? (i.e. why it was included in the webspack build)? It should be a module that looks like a mess of regular expression code, like "./src/components sync ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"
5. Find that module in the stats file. [2] What is its reasons? Does it match the list here: https://github.com/chromaui/chromatic-cli/blob/bdda9b4370f00454ba6c475e7ee84385a60e123b/bin-src/lib/getDependentStoryFiles.js#L64-L71?

[1] an example:

{
      "id": "./src/components/A.stories.js",
      "name": "./src/components/A.stories.js + 1 modules",
      "modules": [
        { "name": "./src/components/A.stories.js" },
        { "name": "./src/components/A.js" }
      ],
      "reasons": [
        { "moduleName": "./src/components sync ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$" }
      ]
    },

[2] same example:

    {
      "id": "./src/components sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$",
      "name": "./src/components sync ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$",
      "reasons": [
        { "moduleName": "./generated-stories-entry.js" }
      ]
    },

[chad-levesque]

I’m seeing this same issue, and it seems directly related to having storyStoreV7: true in our main.js, works fine as soon as I removed it.

Info on fail:

{
  "timestamp": "2022-03-17T12:50:57.032Z",
  "sessionId": "448df17e-6bb2-4bc6-bcaa-371c539fd964",
  "gitVersion": "2.20.1",
  "nodePlatform": "linux",
  "nodeVersion": "16.14.0",
  "packageName": "chromatic",
  "packageVersion": "6.5.3",
  "storybook": {
    "addons": [
      {
        "name": "actions",
        "packageName": "@storybook/addon-actions",
        "packageVersion": "6.4.19"
      },
      {
        "name": "docs",
        "packageName": "@storybook/addon-docs",
        "packageVersion": "6.4.19"
      },
      {
        "name": "essentials",
        "packageName": "@storybook/addon-essentials",
        "packageVersion": "6.4.19"
      },
      {
        "name": "links",
        "packageName": "@storybook/addon-links",
        "packageVersion": "6.4.19"
      }
    ],
    "viewLayer": "react",
    "version": "6.4.19"
  },
  "flags": {
    "onlyChanged": "!(main)",
    "exitZeroOnChanges": "",
    "autoAcceptChanges": "main",
    "externals": [
      "public/**"
    ],
    "projectToken": [],
    "outputDir": [],
    "storybookBuildDir": [],
    "untraced": [],
    "interactive": true,
    "appCode": []
  },
  "buildScript": "build-storybook",
  "spawnParams": {
    "client": "yarn",
    "clientVersion": "3.2.0",
    "nodeVersion": "v16.14.0",
    "platform": "linux",
    "command": "/tmp/xfs-43ae5dc2/yarn",
    "clientArgs": [
      "run",
      "--silent"
    ],
    "scriptArgs": [
      "build-storybook",
      "--output-dir",
      "/tmp/chromatic--448-QuX6DJd2hWdt",
      "--webpack-stats-json",
      "/tmp/chromatic--448-QuX6DJd2hWdt"
    ]
  },
  "exitCode": 0,
  "exitCodeKey": "OK",
  "errorType": "Error",
  "errorMessage": "✖ Failed to publish your built Storybook",
  "build": {
    "id": "6232458952e74d003adb0cd3",
    "number": 303
  }
}
Error: ✖ Failed to publish your built Storybook
Could not retrieve dependent story files.
Did not find any CSF globs in preview-stats.json

Here’s my stats files (following @tmeasday 's instructions above) for both scenarios before and after.

With storyStoreV7: true (“Did not find any CSF globs in preview-stats.json”)

{
    "id": "./src/components/standard/Radio.stories.jsx",
    "name": "./src/components/standard/Radio.stories.jsx",
    "reasons": [
    { "moduleName": "./src lazy ^\\.\\/.*$ include: (?:\\/src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$ namespace object" }
    ]
},
...
{
    "id": "./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$",
    "name": "./src lazy ^\\.\\/.*$ include: (?:\\/src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$ namespace object",
    "reasons": [
    { "moduleName": "./storybook-config-entry.js + 1 modules" }
    ]
},

After removing storyStoreV7: true (works as desired, snapshotted 7 relevant stories when Radio component was modified)

{
    "id": "./src/components/standard/Radio.stories.jsx",
    "name": "./src/components/standard/Radio.stories.jsx",
    "reasons": [
    { "moduleName": "./src sync ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$" }
    ]
},
...
{
    "id": "./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$",
    "name": "./src sync ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$",
    "reasons": [
    { "moduleName": "./generated-stories-entry.js" }
    ]
},