TurboSnap Causing Built Storybook Publish to Fail

Starting a new issue based on the discussion in #486, especially what @larrifax mentioned.

When I enable TurboSnap, Chromatic fails to publish my built Storybook and throws the following errors: Could not retrieve dependent story files and Did not find any CSF globs in preview-stats.json.

My package.json is at the root-level of my repo so I haven’t yet needed to set a base directory, and trying various base directories with TurboSnap enabled haven’t solved the issue either locally or using GitHub Actions.

Before enabling TurboSnap, I did not encounter this issue.

Here’s the output when I run npx chromatic --only-changed:

Chromatic CLI v6.5.1
https://www.chromatic.com/docs/cli

  ✔ Authenticated with Chromatic
    → Using project token '********9caf'
  ✔ Retrieved git information
    → Commit 'e9a0c45' on branch '33-Integrate-Chromatic--victor-grajski'; found 1 parent build and 3 changed files
  ✔ Collected Storybook metadata
    → Storybook 6.4.19 for React; supported addons found: Actions, Backgrounds, Essentials, Links
  ✔ Storybook built in 39 seconds
    → View build log at /Users/victorgrajski/Documents/GitHub/mission-components/build-storybook.log
  ✖ Retrieving story files affected by recent changes
    → Did not find any CSF globs in preview-stats.json
    Verify your Storybook
    Test your stories

✖ Did not find any CSF globs in /var/folders/d2/6l5xyjhx20n7wz2p3lfxwf7w0000gn/T/chromatic--7327-uVXYzI5tusFU/preview-stats.json
Check your stories configuration in .storybook/main.js
ℹ Read more at https://storybook.js.org/docs/react/configure/overview

✖ 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": "2022-02-23T00:50:57.017Z",
  "sessionId": "6bfafd31-9837-41a5-905e-32063d708b77",
  "gitVersion": "2.32.0 (Apple Git-132)",
  "nodePlatform": "darwin",
  "nodeVersion": "14.18.1",
  "packageName": "chromatic",
  "packageVersion": "6.5.1",
  "storybook": {
    "addons": [
      {
        "name": "actions",
        "packageName": "@storybook/addon-actions",
        "packageVersion": "^6.4.19"
      },
      {
        "name": "backgrounds",
        "packageName": "@storybook/addon-backgrounds",
        "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": {
    "projectToken": [
      "e059236c9caf"
    ],
    "onlyChanged": "",
    "outputDir": [],
    "storybookBuildDir": [],
    "externals": [],
    "untraced": [],
    "interactive": true,
    "appCode": []
  },
  "buildScript": "build-storybook --webpack-stats-json",
  "spawnParams": {
    "client": "npm",
    "clientVersion": "6.14.15",
    "nodeVersion": "v14.18.1",
    "platform": "darwin",
    "command": "npm",
    "clientArgs": [
      "run",
      "--silent"
    ],
    "scriptArgs": [
      "build-storybook",
      "--",
      "--output-dir",
      "/var/folders/d2/6l5xyjhx20n7wz2p3lfxwf7w0000gn/T/chromatic--7327-uVXYzI5tusFU",
      "--webpack-stats-json",
      "/var/folders/d2/6l5xyjhx20n7wz2p3lfxwf7w0000gn/T/chromatic--7327-uVXYzI5tusFU"
    ]
  },
  "exitCode": 0,
  "exitCodeKey": "OK",
  "errorType": "Error",
  "errorMessage": "✖ Failed to publish your built Storybook",
  "build": {
    "id": "62156dc1d89943003a5c9cf6",
    "number": 5
  }
}

Error: ✖ Failed to publish your built Storybook
Could not retrieve dependent story files.
Did not find any CSF globs in preview-stats.json
    at /Users/victorgrajski/Documents/GitHub/mission-components/node_modules/chromatic/bin/main.cjs:3:1505207
    at /Users/victorgrajski/Documents/GitHub/mission-components/node_modules/chromatic/bin/main.cjs:3:1501894
    at Object.next (/Users/victorgrajski/Documents/GitHub/mission-components/node_modules/chromatic/bin/main.cjs:3:1501999)
    at a (/Users/victorgrajski/Documents/GitHub/mission-components/node_modules/chromatic/bin/main.cjs:3:1500713)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Following that, I generated a trimmed preview-stats.json, and using a story which I know has changes, here are the relevant modules:

    {
      "id": "./stories lazy recursive ^\\.\\/.*$ include: (?:\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$",
      "name": "./stories lazy ^\\.\\/.*$ include: (?:\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$ namespace object",
      "reasons": [
        { "moduleName": "./storybook-config-entry.js + 1 modules" }
      ]
    },
    {
      "id": "./stories/Accordion/Accordion.stories.tsx",
      "name": "./stories/Accordion/Accordion.stories.tsx + 2 modules",
      "modules": [
        { "name": "./stories/Accordion/Accordion.stories.tsx" },
        { "name": "./stories/Accordion/Accordion.tsx" },
        { "name": "./node_modules/raw-loader/dist/cjs.js!./stories/Accordion/docs.mdx" }
      ],
      "reasons": [
        { "moduleName": "./stories lazy ^\\.\\/.*$ include: (?:\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$ namespace object" }
      ]
    },
    {
      "id": "./storybook-config-entry.js",
      "name": "./storybook-config-entry.js + 1 modules",
      "modules": [
        { "name": "./storybook-config-entry.js" },
        { "name": "./storybook-stories.js" }
      ],
      "reasons": []
    }

And here’s my .storybook/main.js for context:

const path = require('path')
const toPath = (filePath) => path.join(process.cwd(), filePath)

module.exports = {
    framework: '@storybook/react',
    features: {
        storyStoreV7: true,
        postcss: false
    },
    stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-backgrounds',
        'storybook-addon-designs',
        '@storybook/addon-essentials',
        'storybook-addon-pseudo-states'
    ],
    typescript: {
        check: true,
        checkOptions: {},
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
            shouldExtractLiteralValuesFromEnum: true,
            shouldRemoveUndefinedFromOptional: true,
            propFilter: (prop) => (prop.parent ? /@mui/.test(prop.parent.fileName) || !/node_modules/.test(prop.parent.fileName) : true)
        },
        webpackFinal: async (config) => {
            config.module.rules.push({
                test: /\.mdx$/,
                use: 'raw-loader'
            })

            return {
                ...config,
                resolve: {
                    ...config.resolve,
                    extensions: ['.mdx'],
                    alias: {
                        ...config.resolve.alias,
                        '@emotion/core': toPath('node_modules/@emotion/react'),
                        'emotion-theming': toPath('node_modules/@emotion/react')
                    }
                }
            }
        }
    }
}

A couple of questions off the bat I have are:

1. Should I be able to find the files storybook-config-entry.js and storybook-stories.js? I don’t see them anywhere in my folder structure
2. Should there be reasons attached to the storybook-config-entry.js module? I find it interesting that it’s empty

[wallacerenan]

I’m having the same error, I got around building the storybook manually on my CI:

- yarn build-storybook - npx chromatic --exit-zero-on-changes --only-changed -d storybook-static/

this skips the chromatic build command and uses the files from the uploaded folders in the -d argument

[IanVS]

Just a note, the stats file that the vite plugin generates does not include any submodules, since it doesn’t really have the same concept as webpack in that regard. It relies on setting the reasons correctly. So, if that logic changes, please let me know so I can try making some updates to https://github.com/IanVS/vite-plugin-turbosnap to account for it.