Default config path "config.root" didn't work for our monorepo

[Jeroen van Beek]

I had a mismatch with my paths in preview-stats.json and what is used in the Chromatic action, as the Github action gets the path from root. The default config in the readme didn't work for me because it uses the config.root, these Storybook configs are defined in their respective packages.

Default config from readme

viteFinal: (config, { configType }) => {
    return mergeConfig(config, {
      plugins:
        configType === 'PRODUCTION'
          ? [turbosnap({ rootDir: config.root ?? process.cwd() })]
          : [],
    });
  },
}

Output from preview-stats.json

{
    "id": "./src/components/button/button.component.ts",
    "name": "./src/components/button/button.component.ts",
    "reasons": [
      {
        "moduleName": "./src/components/modals/modal.component.stories.ts"
      },
      {
        "moduleName": "./src/components/button/stories/variants/ghost.stories.ts"
      },
      {
        "moduleName": "./src/components/button/stories/variants/default.stories.ts"
      },
      {
        "moduleName": "./src/components/modals/image/image.component.stories.ts"
      },
      {
        "moduleName": "./src/components/button/stories/icons.stories.ts"
      },
      {
        "moduleName": "./src/components/modals/content/content.component.stories.ts"
      }
    ]
 },

Github action log

Trace file...
packages/PACKAGE_NAME/src/components/button/button.component.ts
no moduleId found for this file

Had to resort to the process.cwd

Because our command runs from root this would be fine for us. I just wanted to give a heads-up on this as it cost me some debugging time.

viteFinal: (config, { configType }) => {
    return mergeConfig(config, {
      plugins:
        configType === 'PRODUCTION'
          ? [turbosnap({ process.cwd() })]
          : [],
    });
  },
}

{
    "id": "./packages/PACKAGE_NAME/src/components/button/button.component.ts",
    "name": "./packages/PACKAGE_NAME/src/components/button/button.component.ts",
    "reasons": [
      {
        "moduleName": "./packages/PACKAGE_NAME/src/components/button/stories/variants/ghost.stories.ts"
      },
      {
        "moduleName": "./packages/PACKAGE_NAME/src/components/button/stories/variants/default.stories.ts"
      },
      {
        "moduleName": "./packages/PACKAGE_NAME/src/components/modals/modal.component.stories.ts"
      },
      {
        "moduleName": "./packages/PACKAGE_NAME/src/components/modals/image/image.component.stories.ts"
      },
      {
        "moduleName": "./packages/PACKAGE_NAME/src/components/button/stories/icons.stories.ts"
      },
      {
        "moduleName": "./packages/PACKAGE_NAME/src/components/modals/content/content.component.stories.ts"
      }
    ]
  },

Trace file...
packages/PACKAGE_NAME/src/components/button/button.component.ts
./packages/PACKAGE_NAME/src/components/button/button.component.ts
Trace file...
...etc...

[Ian VanSchooten]

Thanks for the note here. I fully expect that folks will need to customize the command here based on what their repo setup looks like and how they run Storybook, which is why I left this up to the user to configure instead of hard-coding it into the plugin itself. I'll add a note to the README though, to make this extra-clear.