CATEGORY

【Storybook GitHub Actions】 “Failed to load native binding” エラーを解決する方法

npm run build-storybook を実行した際、ローカルでは正常に動作するものの、GitHub Actions のワークフロー上で以下のエラーが発生する場合があった。

Error: Failed to load native binding
at Object.<anonymous> (/node_modules/@swc/core/binding.js:333:11)
at Module._compile (node:internal/modules/cjs/loader:1469:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
at Object.newLoader (/node_modules/esbuild-register/dist/node.js:2262:9)
at extensions..js (/node_modules/esbuild-register/dist/node.js:4833:24)
at Module.load (node:internal/modules/cjs/loader:1288:32)
at Module._load (node:internal/modules/cjs/loader:1104:12)
at Module.require (node:internal/modules/cjs/loader:1311:19)
at require (node:internal/modules/helpers:179:18)
at Object.<anonymous> (/node_modules/@swc/core/index.js:49:17)

=> Failed to build the preview
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems compiling your code with webpack.

実行環境

Node.js v20.18.1
storybook v8.4.5
vue v3.2.3

エラーの解決方法

私の場合は、以下をワークフローに追記することで解消した。
ワークフロー内でクリーンインストールを行うよう設定する。

- name: Install dependencies
  run: |
    rm -rf node_modules package-lock.json
    npm install

原因

node_modules ディレクトリや package-lock.json による古いキャッシュが原因で、ネイティブモジュール（例: node-gyp や @swc/core）のビルドに失敗していた模様。

React MUIのテーマを永続化する方法 | Next.js、TypeScript使用 前の記事

関連記事

  • デザインシステム

FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】

この記事では、Figmaのデザイントークンを活用して、CSSファイルを自動生成する方法を紹介する。FigmaからJSON形式でトークンを出力し、Style Dictionaryを使って各プラットフォームで利用できるCSSやSCSSファイルを生成する手順をステップバイステップで解説する。全体
  • デザインシステム

FigmaのデザイントークンからCSSファイルを自動生成し、Storybook化する手順

この記事では、Figmaで定義したデザイントークンをCSSファイルに自動生成し、その結果をStorybookで視覚的に表示する手順を解説する。前提この記事は、前回記事「FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】」が完了していることを前提に

コメント

この記事へのトラックバックはありません。