The "--output-dir" option is ignored

Bug report

pnpm 8.3.1
storybook 7.0.7
chromatic cli 6.17.3

The documentation says that the --output-dir option can be used to set the Storybook build output directory. But this isn't working.

This is how our relevant scripts are set up in package.json:

{
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "chromatic": "chromatic --exit-zero-on-changes --output-dir .sb-static"
  },
}

Currently, Storybook gets built in a storybook-static directory inside the project. I would like to keep the build in the project tree, but under the .sb-static directory. In the scripts above, chromatic is being passed this directory after the --output-dir option. This seemingly has no effect. After running chromatic, the build is placed in storybook-static.

It's also worth mentioning that there are no errors being output by chromatic. It successfully builds and publishes the storybook. It just builds Storybook in the wrong directory.

Below is the build-storybook.log file. It shows that the build is being placed in the default storybook-static directory.

@storybook/cli v7.0.7

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (172 ms)
info => Copying static files: /mnt/files/dev/projects/rebelcode/aggregator/node_modules/.pnpm/@storybook+manager@7.0.7/node_modules/@storybook/manager/static at /mnt/files/dev/projects/rebelcode/aggregator/storybook-static/sb-common-assets
vite v4.1.0 building for production...

./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
transforming...
Use of eval in "node_modules/.pnpm/telejson@7.1.0/node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
Use of eval in "node_modules/.pnpm/telejson@7.1.0/node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 572 modules transformed.
rendering chunks...
computing gzip size...
storybook-static/iframe.html                                          12.74 kB
storybook-static/assets/preview-78d851d0.css                          10.05 kB │ gzip:   2.68 kB
storybook-static/assets/preview-0b293f2a.js                            0.11 kB │ gzip:   0.13 kB │ map:     0.57 kB
storybook-static/assets/preview-e61d9e78.js                            0.19 kB │ gzip:   0.19 kB │ map:     0.59 kB
storybook-static/assets/index-d475d2ea.js                              0.21 kB │ gzip:   0.17 kB │ map:     0.82 kB
[truncated]

Is this a bug or wrong/outdated docs? Or am I misunderstanding what the --output-dir option is supposed to do?

Maybe, same here.

storybook 7.0.7
chromatic cli 6.17.3

When using pnpm with package.json script, it seems that the chromatic cli cannot set the output-path correctly.

In my case, I encountered this warning:

⚠ Unexpected build directory
The CLI tried to build your Storybook at /var/folders/hl/q2hbw2y16595t2rs40zxvv9w0000gq/T/chromatic--80158-FieWBwGVeNk5
but instead it was built at /Users/user/my-app/storybook-static
Make sure your "build" script forwards the --output-dir (-o) flag to the build-storybook CLI.

Example package.json:

{
  "scripts": {
    "build": "storybook build",
    "chromatic": "chromatic --build-script-name build"
  }
}

Let's put debug flag to chromatic cli.

pnpm run chromatic --debug

The resulting storybook build command is:

pnpm run --silent build -- --output-dir /var/folders/hl/q2hbw2y16595t2rs40zxvv9w0000gq/T/chromatic--81985-mNFGMOsSVsSR
@storybook/cli v7.0.7

info => Cleaning outputDir: /storybook-static # no effect

But what we actually need is:

pnpm run --silent build --output-dir /var/folders/hl/q2hbw2y16595t2rs40zxvv9w0000gq/T/chromatic--81985-mNFGMOsSVsSR
@storybook/cli v7.0.7

info => Cleaning outputDir: /var/folders/hl/q2hbw2y16595t2rs40zxvv9w0000gq/T/chromatic--81985-mNFGMOsSVsSR

Perhaps a similar approach to the support for yarn is needed. 🤔

chromatic-cli/bin-src/tasks/build.ts

Line 61 in 24a3816

isYarn ? '' : '--',

Indeed, I am using pnpm as well. I've updated the issue with the relevant versions.

I checked the output again and can confirm that I see the same messages, except mine tries to build in /tmp/... instead of in /var/..., but otherwise I see the same behavior.

Same problem here, using github actions.
Here the failed action:
https://github.com/antify/antify-ui/actions/runs/6534154083/job/17740743996

Defining yarn as packageManager in package.json it works fine.

This issue should be resolved in v7.0.0 or above, which includes #789 to support with pnpm.

@beyer-johannes output-dir is not a valid option to the GitHub Action. Arguably we should support outputDir but we don't currently.