I am trying to get Chromatic working in my CI/CD environment; when I setup my account and ran through the setup locally everything worked. If I build storybook locally that works without error as well (this is part of my issue). For some reason this only fails when I try to deploy to Chromatic with a GitHub action. Below is my chromatic.yml
name: 'Chromatic'
on:
pull_request:
branches:
- 'develop'
jobs:
chromatic-deployment:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Setup Bun
uses: oven-sh/setup-bun@v1
with:
bun-version: latest
- name: Install dependencies
run: bun install
- name: Publish to Chromatic
uses: chromaui/action@v1
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
exitOnceUploaded: true
- name: Upload Logs
uses: actions/upload-artifact@v3
if: ${{ !cancelled() }}
with:
name: external-logs
path: /home/runner/work/<my path>/**/*.log
When the action tries to build my Storybook I get this error:
=> Failed to build the preview
Error: Internal Error: getResolvedModule() could not resolve module name "./node_modules/@storybook/builder-vite/input/iframe.html"
I have installed @storybook/builder-vite as a devDependency and running build-storybook locally works without giving this or any error. I also ran through the builder-vite check list to make sure there wasn't anything I haven't setup correctly, and I've made any changes suggested there. I've tried a number of other things including changing from calling the Chromatic action to running the Chromatic command as I do locally with my CHROMATIC_PROJECT_TOKEN, but nothing works when I run this as a GitHub action. I know the Chromatic action works because we use this at my job and it deploys without issue. I'm wondering if the problem is using Bun, but I tried setting up Node in the action instead trying to get it to work that way and I still received the same error (and it still was using Bun to run the commands). Any ideas would be appreciated.
To add extra context here are the package.json scripts that are being run as part of the action:
"build-storybook": "storybook build",
"chromatic": "chromatic"
And here are my devDependencies:
"devDependencies": {
"@release-it/bumper": "^5.1.0",
"@rollup/plugin-terser": "^0.4.4",
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/blocks": "^7.5.3",
"@storybook/builder-vite": "^7.5.3",
"@storybook/react": "^7.5.3",
"@storybook/react-vite": "^7.5.3",
"@storybook/testing-library": "^0.2.2",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.0",
"@testing-library/user-event": "^14.5.1",
"@types/lodash-es": "^4.17.11",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/react-transition-group": "^4.4.9",
"@types/uuid": "^9.0.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"autoprefixer": "^10.4.16",
"bun-types": "^1.0.12",
"chromatic": "^9.1.0",
"eslint": "^8.45.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"eslint-plugin-storybook": "^0.6.15",
"postcss": "^8.4.31",
"prettier": "^3.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"release-it": "^16.2.1",
"rollup-plugin-gzip": "^3.1.0",
"storybook": "^7.5.3",
"tailwindcss": "^3.3.5",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vite-plugin-dts": "^3.6.3"
},
Actually I went through a lot of back and forth with the team at Chromatic (I want to thank everyone there who helped) and the fix was to add the following code to the StorybookConfig in storybook's main.ts file.
viteFinal(config) {
config.plugins = (config.plugins ?? []).filter((plugin) => plugin && 'name' in plugin && plugin.name !== 'vite:dts');
return config;
},
A pretty simple solution, but this took about a month of trying one possible solution after another.