mcpField
W
webflow-code-component:troubleshoot-deploy

webflow-code-component:troubleshoot-deploy

github.com/webflow開発133986 回インストール今日更新
リポジトリ

webflow-code-component:troubleshoot-deploy について

Webflow のコードコンポーネントのデプロイ失敗や公開後の不具合を調べるスキルです。認証、ビルド、バンドルサイズ、ネットワーク、設定ごとに原因を整理し、修正と確認の手順を提示します。

主な機能

  1. 01デプロイエラーとログの収集
  2. 02カテゴリ別の原因診断
  3. 03具体的な修正手順の提示
  4. 04よくあるエラーと対処法の提示
  5. 05デプロイ結果の確認案内
  6. 06エスカレーション用情報の整理

活用シーン

  1. 01library share のデプロイ失敗への対処
  2. 02公開済みコンポーネントの表示不具合の診断
  3. 03ビルド、設定、バンドルサイズのエラー修正

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/webflow/webflow-skills --skill webflow-code-component:troubleshoot-deploy

インストール後、Claude Code で/webflow-code-component:troubleshoot-deployを入力して読み込まれたか確認します。

同梱ファイルreferences/ERROR_CATALOG.md

詳細

デプロイのトラブルシューティング

Webflow Code Components のデプロイに関する問題をデバッグして修正します。

このスキルを使用するタイミング

次の場合に使用します：

  • webflow library share がエラーで失敗した
  • コンポーネントはデプロイされたが、正しく動作していない
  • ユーザーからデプロイ時のエラーメッセージが共有された
  • バンドルまたはコンパイルのエラーが発生した

次の場合は使用しないでください：

  • まだデプロイを試していない（代わりに deploy-guide を使用してください）
  • デプロイ前の検証を行う（代わりに pre-deploy-check を使用してください）
  • 一般的なコード品質の問題（代わりに component-audit を使用してください）

手順

フェーズ 1：情報を収集する

  1. エラーの詳細を確認する：

    • 正確なエラーメッセージを尋ねます
    • npx webflow library share の出力を求めます
    • npx webflow library log に追加情報があるか確認します

  2. 状況を把握する：

    • 初回のデプロイですか、それとも更新ですか？
    • 最近変更した内容はありますか？
    • 以前は正常に動作していましたか？
フェーズ 2：診断する

  1. エラーのカテゴリを特定する：

    • 認証エラー
    • ビルド／コンパイルエラー
    • バンドルサイズのエラー
    • ネットワーク／アップロードエラー
    • 設定エラー

  2. 根本原因を分析する：

    • エラーメッセージを解析します
    • よくある原因を確認します
    • 具体的な問題を特定します
フェーズ 3：解決策を提示する

  1. 具体的な修正方法を示す：

    • 解決までの手順
    • 必要に応じてコード例
    • 検証手順

  2. 再発を防止する：

    • 発生した理由を説明します
    • 予防策を提案します

よくあるエラーの一覧

各エラーの詳しい解決策については、references/ERROR_CATALOG.md を参照してください。

クイックリファレンス
エラーカテゴリ簡単な修正方法
"Authentication failed"認証Workspace Settings で API トークンを再生成します
"Insufficient permissions"認証ワークスペースのロールとトークンを確認します
"Module not found"ビルドnpm install --save-dev @webflow/react
"TypeScript errors"ビルドnpx tsc --noEmit を実行してエラーを特定します
"Unexpected token"ビルドファイルの拡張子が .tsx であることを確認します
"Bundle size exceeds limit"バンドルインポートをツリーシェイクし、サイズの大きいコンポーネントを遅延読み込みします
"Component not rendering"ランタイムSSR の問題とブラウザーコンソールを確認します
"Styles not appearing"ランタイム.webflow.tsx ファイルで CSS をインポートします
"webflow.json not found"設定プロジェクトのルートに webflow.json を作成します
"No components found"設定glob パターンとファイル拡張子を確認します
"Invalid JSON in webflow.json"設定JSON の構文を修正します（末尾のカンマ、コメント）
"429 Too Many Requests"ネットワーク60 秒待ってから再試行します
"Request timed out"ネットワーク接続、プロキシ、Webflow のステータスを確認します
"JavaScript heap out of memory"メモリNODE_OPTIONS="--max-old-space-size=4096"
"Circular dependency"ビルド共通コードを切り出し、インポートの循環を解消します
よくある修正方法

認証：

# Regenerate token, then:
export WEBFLOW_WORKSPACE_API_TOKEN=your-new-token
npx webflow library share

依存関係の不足：

npm install --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react

SSR の問題：

// Wrap browser APIs in useEffect or disable SSR:
declareComponent(Component, { options: { ssr: false } });

スタイルの不足：

// In .webflow.tsx, import styles:
import "./Component.module.css";

デバッグコマンド

# Check recent deploy logs
npx webflow library log

# Verbose deploy output (shows detailed errors)
npx webflow library share --verbose

# Type check without deploying
npx tsc --noEmit

検証

次のすべてを満たしていれば、問題は解決しています。

成功条件検証方法
デプロイがエラーなく完了するnpx webflow library share が正常に終了する
コンポーネントが Designer に表示されるDesigner で Add パネルを開き、ライブラリを見つけます
インポートログで成功を確認できるnpx webflow library log にインポートの成功が表示される

ガイドライン

エラー分析の手順
  1. エラーメッセージ全体を読む - 解決策が含まれていることがよくあります
  2. エラーのカテゴリを確認する - 認証、ビルド、バンドル、またはランタイム
  3. ファイルパスを確認する - 問題の正確な場所が示されています
  4. 行番号を確認する - コードエラーの場合
  5. エラーメッセージを検索する - 既知の問題である可能性があります
エスカレーションするタイミング

どの解決策も有効でない場合は、エスカレーションする前に次の情報を収集してください。

  1. デプロイログ：npx webflow library log
  2. 詳細出力：npx webflow library share --verbose
  3. Node.js のバージョン：node -v
  4. パッケージのバージョン：npm list @webflow/webflow-cli @webflow/data-types @webflow/react
  5. 設定：webflow.json の内容
  6. エラーメッセージ：エラー出力の全文（概要の行だけではありません）

次に、以下を行ってください。

  • 障害が発生していないか、Webflow のステータスページを確認する
  • エラーメッセージをWebflow コミュニティフォーラムで検索する
  • 上記で収集した情報を添えて、Webflow サポートに問い合わせる

コメント

Markdown 対応