Agent skill
stackblitz-common-errors
Fix WebContainer and StackBlitz errors: COOP/COEP, SharedArrayBuffer, boot failures. Use when WebContainers fail to boot, embeds don't load, or processes crash inside WebContainers. Trigger: "stackblitz error", "webcontainer error", "SharedArrayBuffer not defined".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/stackblitz-pack/skills/stackblitz-common-errors
SKILL.md
StackBlitz Common Errors
Error Reference
SharedArrayBuffer is not defined
Cause: Missing cross-origin isolation headers.
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Fix: Add both headers to your server. In Vite: server.headers config.
Failed to boot WebContainer
Cause: Only one WebContainer instance allowed per page.
// BAD: Multiple boot calls
const wc1 = await WebContainer.boot();
const wc2 = await WebContainer.boot(); // Fails!
// GOOD: Singleton pattern
let instance: WebContainer | null = null;
async function getWC() {
if (!instance) instance = await WebContainer.boot();
return instance;
}
npm install hangs or fails
Cause: Large dependency tree or network issue in WebContainer.
// Use --prefer-offline and minimal deps
const proc = await wc.spawn('npm', ['install', '--prefer-offline']);
const code = await proc.exit;
if (code !== 0) {
console.error('Install failed, retrying...');
const retry = await wc.spawn('npm', ['install']);
await retry.exit;
}
server-ready event never fires
Cause: Application not listening on a port.
// Ensure your app calls listen()
// app.listen(3000) -- required for server-ready event
// Also check process exit code for crashes
wc.on('error', (err) => console.error('WC error:', err));
File operations fail with ENOENT
Cause: Parent directory doesn't exist.
// Create parent directories first
await wc.fs.mkdir('/src/components', { recursive: true });
await wc.fs.writeFile('/src/components/Button.tsx', content);
Quick Diagnostic
// Check WebContainer state
async function diagnose(wc: WebContainer) {
try {
await wc.fs.readdir('/');
console.log('FS: OK');
} catch { console.error('FS: FAILED'); }
try {
const proc = await wc.spawn('node', ['-v']);
await proc.exit;
console.log('Node: OK');
} catch { console.error('Node: FAILED'); }
}
Error Handling
| Error | Retryable | Action |
|---|---|---|
| Missing COOP/COEP | No | Fix server headers |
| Multiple boot | No | Use singleton pattern |
| npm install fail | Yes | Retry once, then report |
| ENOENT | No | Create parent dirs |
| Process crash | Yes | Restart process |
Resources
Next Steps
For debugging, see stackblitz-debug-bundle.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?