トラブル
npx chromatic --project-token=xxx を実行したところ、下記のエラーが出た。
% npx chromatic --project-token=chpt_****************0946
Chromatic CLI v13.1.4
https://www.chromatic.com/docs/cli
✔ Authenticated with Chromatic
→ Using project token '****************0946'
✔ Retrieved git information
→ Commit '********' on branch 'main'; no ancestor found
✔ Collected Storybook metadata
→ ; using the @storybook/react-vite builder (9.1.5); no supported addons found
✔ Initialized build
→ Build 1 initialized
✖ Building your Storybook
→ Command failed: yarn run build-storybook --output-dir=/tmp/chromatic-build-XXXX
…
Prepare your built Storybook
Publish your built Storybook
Verify your Storybook
Test your stories
The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:
- Check the Storybook build log printed below.
- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/api/cli-options#build
Command failed with ENOENT: yarn run build-storybook --output-dir=/tmp/chromatic-build-XXXX
spawn yarn ENOENT
ℹ Build command:
yarn run build-storybook --output-dir=/tmp/chromatic-build-XXXX
ℹ Runtime metadata:
{
"nodePlatform": "darwin",
"nodeVersion": "22.13.1",
"packageManager": "yarn"
}
ℹ Storybook build output:
/path/to/project/build-storybook.log
原因
yarn コマンドが実行できない状態だったことが原因だった。
% yarn -v
zsh: command not found: yarn
対処1
brew で yarn をインストールした。
% brew install yarn
% yarn -v
4.9.2
ここで、npx chromatic 実行するも、下記のエラーが出た。
% npx chromatic --project-token=chpt_****************0946
Chromatic CLI v13.1.4
https://www.chromatic.com/docs/cli
✔ Authenticated with Chromatic
→ Using project token '****************0946'
✔ Retrieved git information
→ Commit '********' on branch 'main'; no ancestor found
✔ Collected Storybook metadata
→ ; using the @storybook/react-vite builder (9.1.5); no supported addons found
✔ Initialized build
→ Build 4 initialized
✖ Building your Storybook
→ Command failed: yarn run build-storybook --output-dir=/tmp/chromatic-build-XXXX
…
Prepare your built Storybook
Publish your built Storybook
Verify your Storybook
Test your stories
The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:
- Check the Storybook build log printed below.
- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/api/cli-options#build
Command failed with exit code 1: yarn run build-storybook --output-dir=/tmp/chromatic-build-XXXX
ℹ Build command:
yarn run build-storybook --output-dir=/tmp/chromatic-build-XXXX
ℹ Runtime metadata:
{
"nodePlatform": "darwin",
"nodeVersion": "22.13.1",
"packageManager": "yarn",
"packageManagerVersion": "4.9.2"
}
ℹ Storybook build output:
/path/to/project/build-storybook.log
Internal Error: intro-storybook-react-template@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
at jR.getCandidates (/path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***)
at em.getCandidates (/path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***)
at /path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***
at qE (/path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***)
at dt (/path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***)
at async Promise.allSettled (index 0)
at async Uu (/path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***)
at async /path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***
at async Yi.startProgressPromise (/path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***)
at async t.resolveEverything (/path/to/project/.yarn/releases/yarn-4.9.2.cjs:***:***)
対処2
よく見ると先ほどのエラーメッセージに run "yarn install" to update the lockfile と出ていたのだが、よく読んでいなかった私は npm 経由でインストールを実行した。
% npm install -g yarn
added 1 package in 725ms
ここで yarn run build-storybook を実行するも、またエラー。
% yarn run build-storybook
Internal Error: intro-storybook-react-template@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
at jR.getCandidates (/Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:204:8149)
at em.getCandidates (/Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:141:1311)
at /Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:209:8420
at qE (/Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:140:54028)
at dt (/Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:209:8400)
at async Promise.allSettled (index 0)
at async Uu (/Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:140:53356)
at async /Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:209:9166
at async Yi.startProgressPromise (/Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:140:140548)
at async t.resolveEverything (/Users/t_murata/Documents/Develop/Tutorial/intro-storybook-react-template/.yarn/releases/yarn-4.9.2.cjs:209:7138)
対処3
ここでようやく yarn install をすればいいということに気づいた。
% yarn install
解決
% npx chromatic --project-token=chpt_****************0946
Chromatic CLI v13.1.4
https://www.chromatic.com/docs/cli
✔ Authenticated with Chromatic
→ Using project token '****************0946'
✔ Retrieved git information
→ Commit '********' on branch 'main'; no ancestor found
✔ Collected Storybook metadata
→ ; using the @storybook/react-vite builder (9.1.5); no supported addons found
✔ Initialized build
→ Build 5 initialized
✔ Storybook built in 5 seconds
→ View build log at /path/to/project/build-storybook.log
✔ Preparation complete
→ Storybook files validated and prepared for upload
✔ Publish complete in 5 seconds
→ Uploaded 55 files (7.17 MB)
✔ Started build 5
→ Continue setup at https://www.chromatic.com/setup?appId/****************
✔ Build 5 completed
→ Tested 8 stories across 3 components; captured 8 snapshots in 31 seconds
✔ Storybook published
We found 3 components with 8 stories.
ℹ View your Storybook at https://****************.chromatic.com/
ℹ Speed up Continuous Integration
Your project is linked to GitHub so Chromatic will report results there.
✖ Found 8 visual changes
Review the changes at https://****************.chromatic.com/setup?appId/****************
ℹ For CI/CD use cases, this command failed with exit code 1
Pass --exit-zero-on-changes to succeed this command regardless of changes.
Pass --auto-accept-changes to succeed and automatically accept any changes.
⚠ No 'chromatic' script found in your package.json
Would you like me to add it for you? [y/N]y
✔ Added script 'chromatic' to package.json
You can now run it here or in CI with 'npm run chromatic' or 'yarn chromatic'.
ℹ Your project token was added to the script via the --project-token flag.
If you're running Chromatic via continuous integration, we recommend setting
the CHROMATIC_PROJECT_TOKEN environment variable in your CI environment.
You can then remove the --project-token from your package.json script.