Dépanneur Webflow CLI

Diagnostiquez et résolvez les problèmes Webflow CLI avec des commandes de diagnostic et des corrections automatisées.

Note importante

TOUJOURS utiliser l'outil Bash pour toutes les opérations de diagnostic :

• Exécutez les commandes de diagnostic via l'outil Bash
• Utilisez l'outil Read pour examiner les fichiers de configuration
• Vérifiez l'installation CLI : webflow --version
• Vérifiez l'authentification : webflow auth login (si nécessaire)
• Utilisez les drapeaux de diagnostic CLI : --verbose, --debug-bundler, --help
• N'utilisez PAS les outils Webflow MCP pour les workflows CLI
• Toutes les commandes CLI nécessitent des descriptions appropriées (pas de paramètres de contexte)

Détection du gestionnaire de paquets :

• Vérifiez les fichiers de verrouillage : package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn)
• Si aucun fichier de verrouillage trouvé, demandez à l'utilisateur quel gestionnaire de paquets utiliser (npm/pnpm/yarn)
• Utilisez le gestionnaire de paquets détecté pour toutes les commandes install/build

Instructions

Phase 1 : Identification du problème

1. Demandez à l'utilisateur de décrire le problème : Quelle commande a échoué ou quelle erreur s'est produite
2. Déterminez la catégorie d'erreur :
   • CLI non installé ou mauvaise version
   • Authentification échouée
   • Build/bundle échoué
   • Commande non reconnue
3. Capturez le message d'erreur : Obtenez la sortie d'erreur exacte

Phase 2 : Exécutez les diagnostics

4. Vérifiez l'installation CLI : Exécutez webflow --version
5. Vérifiez l'authentification : Exécutez webflow auth login si nécessaire
6. Exécutez la commande avec --verbose : Exécutez la commande échouée avec le drapeau --verbose pour une sortie détaillée
7. Utilisez --debug-bundler (si problème de bundle) : Exécutez avec le drapeau --debug-bundler pour voir la configuration du bundler
8. Vérifiez --help : Exécutez webflow <command> --help pour vérifier la syntaxe de la commande

Phase 3 : Analyser et corriger

9. Identifiez la cause racine : Analysez les messages d'erreur et la sortie de diagnostic
10. Présentez la correction : Montrez la solution spécifique basée sur l'erreur CLI
11. Appliquez la correction : Exécutez les commandes de correction
12. Vérifiez : Réexécutez la commande originale pour confirmer la résolution

Exemples

Exemple 1 : CLI non installé

Invitation utilisateur :

Getting "webflow: command not found"

Diagnostics :

🔍 Checking CLI Installation

Executing: webflow --version

Error: bash: webflow: command not found

❌ Webflow CLI not installed

Correction :

📋 Fix: Install Webflow CLI

Executing: npm install -g @webflow/cli

✓ CLI installed

Verifying...
Executing: webflow --version

Output: @webflow/cli/1.5.2

✅ Issue resolved

Exemple 2 : Build échoué

Invitation utilisateur :

Build is failing but I don't know why

Diagnostics :

🔍 Running Build with Diagnostics

Executing: webflow library bundle --verbose

Output:
[verbose] Loading webflow.json
[verbose] Found library config
[verbose] Building components from ./src/**/*.webflow.tsx
[verbose] Running bundler
Error: Failed to resolve import './missing-file.ts'

❌ Build failed: Missing import file

Correction :

📋 Fix: Missing Import

Issue: Component imports './missing-file.ts' which doesn't exist

Solutions:
1. Create the missing file
2. Fix the import path
3. Remove the import if not needed

Check your component imports and ensure all files exist.

Exemple 3 : Problème de configuration du bundle

Invitation utilisateur :

Bundle is failing with webpack errors

Diagnostics :

🔍 Checking Bundle Configuration

Executing: webflow library bundle --debug-bundler

Output:
[debug-bundler] Final bundler configuration:
{
  "entry": "./src/Component.tsx",
  "output": {
    "path": "/dist",
    "filename": "bundle.js"
  },
  "resolve": {
    "extensions": [".ts", ".tsx", ".js"]
  }
}

Error: Module not found: Can't resolve 'styled-components'

❌ Bundle failed: Missing dependency

Correction :

📋 Fix: Install Missing Dependency

Executing: npm install styled-components

✓ Dependency installed

Retrying bundle...
Executing: webflow library bundle

✓ Bundle created successfully

✅ Issue resolved

Directives

Commandes de diagnostic CLI

Vérification de version :

webflow --version
# ou
webflow -V

Aide sur les commandes :

webflow --help                    # Aide générale
webflow library --help            # Aide des commandes library
webflow library bundle --help     # Aide de commande spécifique

Sortie détaillée :

# Ajoutez --verbose à n'importe quelle commande pour un débogage détaillé
webflow library bundle --verbose
webflow cloud deploy --verbose
webflow extension bundle --verbose

Debug du bundler :

# Affiche la configuration finale du bundler
webflow library bundle --debug-bundler
webflow extension bundle --debug-bundler

Problèmes courants et corrections

Problème : CLI non trouvé

• Diagnostic : webflow --version échoue
• Correction : npm install -g @webflow/cli
• Vérification : webflow --version affiche la version

Problème : Mauvaise version CLI

• Diagnostic : webflow --version affiche une ancienne version
• Correction : npm update -g @webflow/cli
• Vérification : Version la plus récente installée

Problème : Commande non reconnue

• Diagnostic : Erreur « Unknown command »
• Correction : Vérifiez la commande avec webflow --help
• Vérification : Utilisez la syntaxe de commande correcte

Problème : Authentification échouée

• Diagnostic : Erreur « Not authenticated »
• Correction : webflow auth login
• Vérification : L'authentification réussit

Problème : Build échoué

• Diagnostic : Exécutez avec le drapeau --verbose
• Correction : Corrigez les erreurs affichées dans la sortie détaillée
• Vérification : Le build réussit

Problème : Erreur de configuration du bundle

• Diagnostic : Exécutez avec le drapeau --debug-bundler
• Correction : Ajustez la configuration du bundler dans webflow.json
• Vérification : Le bundle réussit

Problème : Dépendances manquantes

• Diagnostic : Erreurs « Module not found »
• Correction : npm install ou installez un paquet spécifique
• Vérification : Le build/bundle réussit

Problème : node_modules corrompu

• Diagnostic : Échecs de build inexpliqués
• Correction : rm -rf node_modules && npm install
• Vérification : Le build réussit

Gestion des erreurs

CLI non installé :

❌ Webflow CLI Not Found

Install:
npm install -g @webflow/cli

Verify:
webflow --version

Docs: https://developers.webflow.com/cli

Authentification requise :

❌ Authentication Failed

Fix:
webflow auth login

Follow browser prompts to authenticate

Build/Bundle échoué :

❌ Build Failed

Run with diagnostics:
webflow library bundle --verbose --debug-bundler

This shows:
- Detailed build steps
- Import resolution
- Bundler configuration
- Exact error location

Fix the errors shown in output

Erreur inconnue :

❌ Unknown Issue

Gather info:
1. What command are you running?
2. Run command with --verbose flag
3. Check command syntax with --help
4. Share full error output

This helps identify the specific problem

Opérations sur fichiers

Lecture des fichiers de configuration :

# View webflow.json
Read: webflow.json

# View package.json
Read: package.json

# View build output
Read: dist/

Découverte de fichiers :

# Find config files
Glob: **/webflow.json

# Find components
Glob: src/**/*.webflow.tsx

# Find logs
Glob: **/*.log

Bonnes pratiques

Toujours commencer par :

1. Vérifiez la version CLI : webflow --version
2. Vérifiez la syntaxe de la commande : webflow <command> --help
3. Exécutez avec verbose : Ajoutez le drapeau --verbose

Pour les problèmes de build/bundle :

1. Utilisez --verbose pour une sortie détaillée
2. Utilisez --debug-bundler pour voir la configuration
3. Vérifiez les chemins d'import
4. Vérifiez que les dépendances sont installées

Pour les problèmes d'authentification :

1. Exécutez webflow auth login
2. Suivez les invites du navigateur
3. Vérifiez l'accès à l'espace de travail

Pour les problèmes d'installation :

1. Vérifiez la version de Node.js : node --version
2. Installez CLI globalement : npm install -g @webflow/cli
3. Vérifiez l'installation : webflow --version

Référence rapide

Workflow : identifier → diagnostiquer → corriger → vérifier

Drapeaux de diagnostic :

• --version / -V - Vérifiez la version CLI
• --help / -h - Affichez l'aide de la commande
• --verbose - Sortie de débogage détaillée
• --debug-bundler - Affiche la configuration du bundler

Corrections courantes :

• Non installé → npm install -g @webflow/cli
• Mauvaise version → npm update -g @webflow/cli
• Auth échouée → webflow auth login
• Build échoué → Vérifiez la sortie --verbose
• Erreur de bundle → Vérifiez la sortie --debug-bundler
• Dépendances manquantes → npm install

Documentation : https://developers.webflow.com/cli