question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Publish to chromatic GitHub action failing

See original GitHub issue

I’ve attached the GitHub Action log at the bottom of the issue.

This problem seems to be with Node Sass.

Here is the chromatic.yml GitHub Action.

# Workflow name
name: 'Chromatic'

# Event for the workflow
on: push

jobs:
    chromatic-deployment:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
              with:
                  fetch-depth: 0 # 👈 Required to retrieve git history
            - uses: actions/setup-node@v1
            - name: Cache node modules
              uses: actions/cache@v2
              env:
                  cache-name: cache-node-modules
              with:
                  # npm cache files are stored in `~/.npm` on Linux/macOS
                  path: ~/.npm
                  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
                  restore-keys: |
                      ${{ runner.os }}-build-${{ env.cache-name }}-
                      ${{ runner.os }}-build-
                      ${{ runner.os }}-

            - name: Install dependencies
              run: npm install

            - name: Publish to chromatic
              uses: chromaui/action@v1
              # Chromatic GitHub Action options
              with:
                  token: ${{ secrets.GITHUB_TOKEN }}
                  # 👇 Chromatic projectToken, refer to the manage page to obtain it.
                  projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
                  exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing
                  exitOnceUploaded: true # 👈 Exit with status 0 (OK) once the build has been sent to Chromatic
                  buildScriptName: storybook:export

I’ve tried adding npm rebuild node-sass and changing the node version to explicitly use Node version 10, but I’m still getting the same error.

- uses: actions/setup-node@v2
   with:
     node-version: '10'

Error snippet

ERR! => Failed to build the preview
ERR! ./src/Components/BIMViewer/BIMViewer.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--14-3!./src/Components/BIMViewer/BIMViewer.scss)
ERR! Module Error (from ./node_modules/sass-loader/dist/cjs.js):
ERR! Missing binding /home/runner/work/iot-cardboard-js/iot-cardboard-js/node_modules/node-sass/vendor/linux-x64-72/binding.node
ERR! Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 12.x
ERR! 
ERR! Found bindings for the following environments:
ERR!   - Linux 64-bit with Node.js 10.x
ERR! 
ERR! This usually happens because your environment has changed since running `npm install`.
ERR! Run `npm rebuild node-sass` to download the binding for your current environment.

Chromatic action step (up to first failure)

Run chromaui/action@v1
  with:
    token: ***
    projectToken: ***
    exitZeroOnChanges: true
    exitOnceUploaded: true
    buildScriptName: storybook:export

Chromatic CLI v5.8.2
https://www.chromatic.com/docs/cli

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '********8661'
Retrieving git information
Retrieved git information
    → Commit 'b715b6a' on branch 'user/niusoff/xeokit'; found 1 parent commit
Collecting Storybook metadata
Collected Storybook metadata
    → Storybook v6.1.21 for React; supported addons found: Essentials
Building your Storybook
    → Running command: npm run --silent storybook:export -- --output-dir /tmp/chromatic--1766-v7HIDElUi8Ar
The CLI tried to run your storybook:export 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 storybook:export or yarn storybook:export 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/configurations/cli-options/#for-build-storybook

Command failed with exit code 1: npm run --silent storybook:export -- --output-dir /tmp/chromatic--1766-v7HIDElUi8Ar

ℹ Storybook build output:
/home/runner/work/iot-cardboard-js/iot-cardboard-js/build-storybook.log

info @storybook/react v6.1.21
info 
info => Cleaning outputDir /tmp/chromatic--1766-v7HIDElUi8Ar
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => Manager built (21 s)
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 6 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Using default Webpack setup
info => Compiling preview..
ERR! => Failed to build the preview
ERR! ./src/Components/BIMViewer/BIMViewer.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ref--14-3!./src/Components/BIMViewer/BIMViewer.scss)
ERR! Module Error (from ./node_modules/sass-loader/dist/cjs.js):
ERR! Missing binding /home/runner/work/iot-cardboard-js/iot-cardboard-js/node_modules/node-sass/vendor/linux-x64-72/binding.node
ERR! Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 12.x
ERR! 
ERR! Found bindings for the following environments:
ERR!   - Linux 64-bit with Node.js 10.x
ERR! 
ERR! This usually happens because your environment has changed since running `npm install`.
ERR! Run `npm rebuild node-sass` to download the binding for your current environment.

...
...
...
...

Error: non-zero exit code

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:8
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ghengeveldcommented, May 21, 2021

We’ve just released v5.8.3 and updated chromaui/action@v1 accordingly. You should switch back to the regular action if you were using the canary.

1reaction
shadiramadancommented, May 19, 2021

https://github.com/chromaui/action doesn’t allow posting issues. Our chromatic builds started failing > 4 hours ago.

We get a slightly different error- but it looks like the https://github.com/chromaui/action repo had a force push on the master branch- there is only one commit that is 6 hours old.

Read more comments on GitHub >

github_iconTop Results From Across the Web

build-storybook fails in Github Actions #580
here is my yml # .github/workflows/chromatic.yml # Workflow name name: 'Chromatic' # Event for the workflow on: push # List of jobs jobs: ......
Read more >
Automate Chromatic with GitHub Actions • Chromatic docs
Re-run failed builds after verifying UI test results​​ Once you accept all the changes, re-run the workflow, and the chromatic-deployment job will pass....
Read more >
Chromatic deployment error when using github-actions
Error: ✖ Failed to collect Storybook metadata Could not find a supported Storybook viewlayer package. Make sure one is installed, or set ...
Read more >
storybook-chromatic | Yarn - Package Manager
Chromatic CLI. Publishes your Storybook to Chromatic and kicks off tests if they're enabled. ... FIX setting the fromCI flag from our github...
Read more >
How to fix POST /repos/…/check-runs 403 error on GitHub ...
How to fix POST /repos/…/check-runs 403 error on GitHub Action workflow. Today, I created a new GitHub repo and started a new .NET...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found