TurboSnap Causing Built Storybook Publish to Fail

[victor-grajski]

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 [email protected] 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

[IanVS]

I can't answer much of what you're asking, except to say that storybook-config-entry.js and storybook-stories.js are "virtual" files that storybook creates in the bundling process, you shouldn't see them anywhere on disk. Since you're using storyStoreV7, chromatic is looking for a file that has a reason of storybook-stories.js. Instead, it seems like the reason is skipping a step and going straight to /storybook-config-entry.js. I'm not familiar enough with the webpack builder to know why that might be. But hopefully this context might help a little bit. As a troubleshooting step, I suppose you could try turning off storyStoreV7 and see if maybe turbosnap does indeed start working, as I suspect it will.

[victor-grajski]

Disabling storyStoreV7 worked, thank you for the quick reply! Would this solution point to a deeper issue in the build process?

[IanVS]

I'm not sure, I think @ghengeveld would probably need to weigh in on what might be happening.

[tmeasday]

Looks like the issue is that webpack has bundled "./storybook-stories.js" into the grouped "module" "./storybook-config-entry.js + 1 modules" instead of its own module. This means that the check to see if "./stories lazy recursive ^\\.\\/.*$ include: (?:... is a "csf glob" (which it should be):

https://github.com/chromaui/chromatic-cli/blob/10e00440d98297a7237416bc70ca8b25733b5daf/bin-src/lib/getDependentStoryFiles.ts#L110-L111

Is checking if the "reason" ("./storybook-config-entry.js + 1 modules" in this case) matches the regexp for a stories entry file. Which it doesn't (the stories entry file is "./storybook-stories.js").

I'm not sure why webpack is bundling the two things together in your SB but not the SBs we've tested in (my guess would be that your preview.js doesn't have many/any dependencies and you aren't using a lot of addons 🤷) but it sounds like we need to cope with this scenario.

I guess the fix is @ghengeveld:

Rather than matching the reason string, which can be of the form "X + N others", we need to:

1. Take the reason string
2. Look up the actual module
3. Take each of the sub modules ([{ "name": "./storybook-config-entry.js" }, { "name": "./storybook-stories.js" }] in this case)
4. Check each one against the regexps.

WDYT?

[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.

[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

[randallagordon]

Just bumped into this as well and a simple rename of the file got us going since there weren't any type annotations in play yet! 🎉 Happy to provide further details if it'd be useful, though it appears there's a good notion of what's up already?

[davincho]

I had the same issue and as I wanted to leverage TurboSnap and the new storyStory format, removing --only-changed or storyStoreV7 was not an option for me. I solved it by upgrading the bundler to webpack 5 - see https://storybook.js.org/docs/react/builders/webpack#webpack-5 (EDIT: previously we used webpack 4)

[tmeasday]

@davincho that's very interesting about webpack 5.

@victor-grajski -- I think I can infer from your configuration that you are using webpack 4 currently (or were at the time)?

@wallacerenan @randallagordon -- are you also using webpack 4?