Chromatic deploy is failing on Bitbucket pipeline

[Hazem Alabiad]

Hey guys,

I am trying to run Chromatic on Bitbucket pipeline however, the deployment is failing on the cloud even though it is working fine locally 

yarn build-storybook 

Here is my pipeline config:

 - step: &chromatic

        name: Publish to Chromatic

        script:
 
          - apk add --no-cache git

          - yarn

          - yarn chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --zip --only-changed --exit-zero-on-changes

Here is the error that am getting: 

+ umask 000

+ GIT_LFS_SKIP_SMUDGE=1 retry 6 git clone --branch="fix-chromatic" --depth 50 https://x-token-auth:$REPOSITORY_OAUTH_ACCESS_TOKEN@bitbucket.org/$BITBUCKET_REPO_FULL_NAME.git $BUILD_DIR
Cloning into '/opt/atlassian/pipelines/agent/build'...

+ git reset --hard 89e3ef14555fff81a954ed35ed541720fd594a9c
HEAD is now at 89e3ef1 chore: update docker node image to v18.15.0

+ git config user.name bitbucket-pipelines

+ git config user.email commits-noreply@bitbucket.org

+ git config push.default current

+ git config http.${BITBUCKET_GIT_HTTP_ORIGIN}.proxy http://localhost:29418/

+ git remote set-url origin http://bitbucket.org/$BITBUCKET_REPO_FULL_NAME

+ git reflog expire --expire=all --all

+ echo ".bitbucket/pipelines/generated" >> .git/info/exclude

+ chmod 777 $BUILD_DIR


Artifact "tag.txt": Downloading
Artifact "tag.txt": Downloaded 107 B in 0 seconds
Artifact "tag.txt": Extracting
Artifact "tag.txt": Extracted in 0 seconds

Default variables:
BITBUCKET_BRANCH
BITBUCKET_BUILD_NUMBER
BITBUCKET_CLONE_DIR
BITBUCKET_COMMIT
BITBUCKET_GIT_HTTP_ORIGIN
BITBUCKET_GIT_SSH_ORIGIN
BITBUCKET_PIPELINE_UUID
BITBUCKET_PROJECT_KEY
BITBUCKET_PROJECT_UUID
BITBUCKET_REPO_FULL_NAME
BITBUCKET_REPO_IS_PRIVATE
BITBUCKET_REPO_OWNER
BITBUCKET_REPO_OWNER_UUID
BITBUCKET_REPO_SLUG
BITBUCKET_REPO_UUID
BITBUCKET_SSH_KEY_FILE
BITBUCKET_STEP_RUN_NUMBER
BITBUCKET_STEP_TRIGGERER_UUID
BITBUCKET_STEP_UUID
BITBUCKET_WORKSPACE
CI
DOCKER_HOST
PIPELINES_JWT_TOKEN

Workspace variables:
AWS_ACCESS_KEY
AWS_ACCESS_KEY_ID_CODE_ARTIFACT
AWS_SECRET_KEY
AWS_SECRET_KEY_ID_CODE_ARTIFACT
BITBUCKET_SDLC_PASS
BITBUCKET_SDLC_PASS_PR
BITBUCKET_SDLC_USER
CDK_DEFAULT_REGION
DATA_DEVSECOPS_IMAGE_PULLER_AWS_ACCESS_KEY_ID
DATA_DEVSECOPS_IMAGE_PULLER_AWS_SECRET_ACCESS_KEY
DATA_GITLEAKS_SLACK_WEBHOOK_URL
DEV_ACCOUNT_ROLE_ARN
GETIR_OPS_ACCOUNT_ID
GITOPS_PASSWORD
GITOPS_USERNAME
GOPRIVATE
OAUTH_CLIENT_KEY
OAUTH_CLIENT_SECRET
PIPELINE_BITBUCKET_USER
PIPELINE_BITBUCKET_USER_PASSWORD
SONARQUBE_HOST
SONARQUBE_LOGIN
SONAR_TOKEN
STG_ACCOUNT_ROLE_ARN
TARGET_BRANCH

Repository variables:
AWS_ACCESS_KEY_ID
AWS_ACCOUNT_ID
AWS_DEFAULT_REGION
AWS_SECRET_ACCESS_KEY
CHROMATIC_PROJECT_TOKEN

Images used:
build : docker.io/library/node@sha256:47d97b93629d9461d64197773966cc49081cf4463b1b07de5a38b6bd5acfbe9d
+ apk update && apk add --no-cache git
fetch https://dl-cdn.alpinelinux.org/alpine/v3.17/main/x86_64/APKINDEX.tar.gz
fetch https://dl-cdn.alpinelinux.org/alpine/v3.17/community/x86_64/APKINDEX.tar.gz
v3.17.3-86-gd961f255036 [https://dl-cdn.alpinelinux.org/alpine/v3.17/main]
v3.17.3-89-g3fcf827ebca [https://dl-cdn.alpinelinux.org/alpine/v3.17/community]
OK: 17818 distinct packages available
fetch https://dl-cdn.alpinelinux.org/alpine/v3.17/main/x86_64/APKINDEX.tar.gz
fetch https://dl-cdn.alpinelinux.org/alpine/v3.17/community/x86_64/APKINDEX.tar.gz
(1/7) Installing ca-certificates (20220614-r4)
(2/7) Installing brotli-libs (1.0.9-r9)
(3/7) Installing nghttp2-libs (1.51.0-r0)
(4/7) Installing libcurl (8.0.1-r0)
(5/7) Installing libexpat (2.5.0-r0)
(6/7) Installing pcre2 (10.42-r0)
(7/7) Installing git (2.38.4-r1)
Executing busybox-1.35.0-r29.trigger
Executing ca-certificates-20220614-r4.trigger
OK: 18 MiB in 24 packages

+ yarn install
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
[3/4] Linking dependencies...
warning " > @mui/x-date-pickers@6.0.4" has unmet peer dependency "@mui/system@^5.4.1".
warning " > babel-loader@9.1.2" has unmet peer dependency "webpack@>=5".
[4/4] Building fresh packages...
$ husky install
husky - Git hooks installed
Done in 85.48s.

+ yarn chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --zip --only-changed --exit-zero-on-changes
yarn run v1.22.19
$ chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --zip --only-changed --exit-zero-on-changes

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

Authenticating with Chromatic
→ Connecting to https://index.chromatic.com
Authenticated with Chromatic
→ Using project token '********f4f0'
Retrieving git information
Found 62 changed files:
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.eslintignore
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.eslintrc.json
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.nvmrc
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.prettierignore
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.prettierrc.json
.storybook/main.cjs
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.storybook/main.ts
.storybook/preview.cjs
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.storybook/preview.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.vscode/extensions.json
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/.vscode/settings.json
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/Dockerfile
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/bitbucket-pipelines.yml
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/index.html
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/package.json
src/App.css
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/App.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/assets/react.svg
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/components/ErrorBoundary/index.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/components/Icon/GetirIcon.test.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/components/Icon/GetirIcon.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/components/Icon/Icon.stories.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/components/Icon/LazyGetirIcon.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/components/Icon/useIcon.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/constants/routes.ts
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/contexts/LocaleContext/index.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/features/HomePage/index.tsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/icons/academia-outline.svg
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/icons/academia-solid.svg
src/index.css
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/lang/en.json
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/lang/syncLocales.cjs
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/lang/syncLocales.test.jsx
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/lang/tr.json
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/main.tsx
src/stories/Button.stories.tsx
src/stories/Button.tsx
src/stories/Header.stories.tsx
src/stories/Header.tsx
src/stories/Introduction.stories.mdx
src/stories/Page.stories.tsx
src/stories/Page.tsx
src/stories/assets/code-brackets.svg
src/stories/assets/colors.svg
src/stories/assets/comments.svg
src/stories/assets/direction.svg
src/stories/assets/flow.svg
src/stories/assets/plugin.svg
src/stories/assets/repo.svg
src/stories/assets/stackalt.svg
src/stories/button.css
src/stories/header.css
src/stories/page.css
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/theme/components.ts
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/theme/palette.ts
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/theme/typography.ts
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/src/vite-env.d.ts
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/tsconfig.json
vite-env.d.ts
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/vite.config.ts
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/vitest.config.ts
https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/yarn.lock
Retrieved git information
→ Commit '89e3ef1' on branch 'fix-chromatic'; found 1 parent build and 62 changed files
Collecting Storybook metadata
Collected Storybook metadata
→ ; no supported addons found
Initializing build
Initialized build
→ Build 65 initialized
Building your Storybook
→ Running command: /usr/local/bin/node /opt/yarn-v1.22.19/bin/yarn.js run build-storybook --output-dir /tmp/chromatic--262-i5B3CN9nkXLY --webpack-stats-json /tmp/chromatic--262-i5B3CN9nkXLY
→ [* ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ *]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
→ [ * ]
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 https://bitbucket.org/getirdev/getirjobs-corporate-web/src/89e3ef14555fff81a954ed35ed541720fd594a9c/index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Operation timed out

ℹ Spawn settings:
{
"client": "yarn",
"clientVersion": "1.22.19",
"nodeVersion": "v18.15.0",
"platform": "linux",
"command": "/usr/local/bin/node",
"clientArgs": [
"/opt/yarn-v1.22.19/bin/yarn.js",
"run"
],
"scriptArgs": [
"build-storybook",
"--output-dir",
"/tmp/chromatic--262-i5B3CN9nkXLY",
"--webpack-stats-json",
"/tmp/chromatic--262-i5B3CN9nkXLY"
]
}

ℹ Storybook build output:
/opt/atlassian/pipelines/agent/build/build-storybook.log

$ storybook build --output-dir /tmp/chromatic--262-i5B3CN9nkXLY --webpack-stats-json /tmp/chromatic--262-i5B3CN9nkXLY
@storybook/cli v7.0.2
info => Cleaning outputDir: /tmp/chromatic--262-i5B3CN9nkXLY
info => Loading presets
info Found existing addon "@storybook/addon-docs", skipping.
info Found existing addon "@storybook/addon-docs", skipping.
info => Building manager..
info => Manager built (599 ms)
info => Copying static files: /opt/atlassian/pipelines/agent/build/node_modules/@storybook/manager/static at /tmp/chromatic--262-i5B3CN9nkXLY/sb-common-assets
WARN No story files found for the specified pattern: src/**/*.mdx
vite v4.2.1 building for production...
./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
transforming...
→ Command failed: /usr/local/bin/node /opt/yarn-v1.22.19/bin/yarn.js run build-storybook --output-dir /tmp/chromatic--262-i5B3CN9nkXLY --webpack-stats-json /tmp/chromatic--262-i5B3CN9nkXLY

error Command failed with exit code 105.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Searching for test report files in directories named [test-results, failsafe-reports, test-reports, TestResults, surefire-reports] down to a depth of 4
Finished scanning for test reports. Found 0 test report files.
Merged test suites, total number tests is 0, with 0 failures and 0 errors.

[Theodora Boudale]

Hi @Hazem Alabiad and welcome to the community!

Just to give you some context, Pipelines builds run in Docker containers. For every step of your build, a Docker container starts (the build container) using the image you have specified in your bitbucket-pipelines.yml file. The repo is cloned in this container, and then the commands from the step's script are executed. When the step finishes, the container gets destroyed.

That container is not the same environment as the one on your computer, it may have different tools and dependencies.

I would suggest debugging your build locally with Docker as per the following guide:

• https://confluence.atlassian.com/bbkb/debug-pipelines-locally-with-docker-1167698072.html

Make sure to use a clone of the repo at the same commit as your Pipelines build and also the same Docker image that you use as a build container in your bitbucket-pipelines.yml file.

Once you have the container up and running locally, you can execute the commands of your bitbucket-pipelines.yml file to see if the issue is reproducible. You can also run additional commands to further debug the issue.

If you have any questions, please feel free to let me know.

Kind regards,
Theodora