Curated Skills
by lstudlo

cloudflare

references/pages/gotchas.md

.md 204 lines
Back to Skill Download File
Content 
# Gotchas

## Functions Not Running

**Problem**: Function endpoints return 404 or don't execute  
**Causes**: `_routes.json` excludes path; wrong file extension (`.jsx`/`.tsx`); Functions dir not at output root  
**Solution**: Check `_routes.json`, rename to `.ts`/`.js`, verify build output structure

## 404 on Static Assets

**Problem**: Static files not serving  
**Causes**: Build output dir misconfigured; Functions catching requests; Advanced mode missing `env.ASSETS.fetch()`  
**Solution**: Verify output dir, add exclusions to `_routes.json`, call `env.ASSETS.fetch()` in `_worker.js`

## Bindings Not Working

**Problem**: `env.BINDING` undefined or errors  
**Causes**: wrangler.jsonc syntax error; wrong binding IDs; missing `.dev.vars`; out-of-sync types  
**Solution**: Validate config, verify IDs, create `.dev.vars`, run `npx wrangler types`

## Build Failures

**Problem**: Deployment fails during build  
**Causes**: Wrong build command/output dir; Node version incompatibility; missing env vars; 20min timeout; OOM  
**Solution**: Check Dashboard → Deployments → Build log; verify settings; add `.nvmrc`; optimize build

## Middleware Not Running

**Problem**: Middleware doesn't execute  
**Causes**: Wrong filename (not `_middleware.ts`); missing `onRequest` export; didn't call `next()`  
**Solution**: Rename file with underscore prefix; export handler; call `next()` or return Response

## Headers/Redirects Not Working

**Problem**: `_headers` or `_redirects` not applying  
**Causes**: Only work for static assets; Functions override; syntax errors; exceeded limits  
**Solution**: Set headers in Response object for Functions; verify syntax; check limits (100 headers, 2,100 redirects)

## TypeScript Errors

**Problem**: Type errors in Functions code  
**Causes**: Types not generated; Env interface doesn't match wrangler.jsonc  
**Solution**: Run `npx wrangler types --path='./functions/types.d.ts'`; update Env interface

## Local Dev Issues

**Problem**: Dev server errors or bindings don't work  
**Causes**: Port conflict; bindings not passed; local vs HTTPS differences  
**Solution**: Use `--port=3000`; pass bindings via CLI or wrangler.jsonc; account for HTTP/HTTPS differences

## Performance Issues

**Problem**: Slow responses or CPU limit errors  
**Causes**: Functions invoked for static assets; cold starts; 10ms CPU limit; large bundle  
**Solution**: Exclude static via `_routes.json`; optimize hot paths; keep bundle < 1MB

## Framework-Specific

### ⚠️ Deprecated Frameworks

**Next.js**: Official adapter (`@cloudflare/next-on-pages`) **deprecated** and unmaintained.
- **Problem**: No updates since 2024; incompatible with Next.js 15+; missing App Router features
- **Cause**: Cloudflare discontinued official support; community fork exists but limited
- **Solutions**:
  1. **Recommended**: Use Vercel (official Next.js host)
  2. **Advanced**: Self-host on Workers using custom adapter (complex, unsupported)
  3. **Migration**: Switch to SvelteKit/Nuxt (similar DX, full Pages support)

**Remix**: Official adapter (`@remix-run/cloudflare-pages`) **deprecated**.
- **Problem**: No maintenance from Remix team; compatibility issues with Remix v2+
- **Cause**: Remix team deprecated all framework adapters
- **Solutions**:
  1. **Recommended**: Migrate to SvelteKit (similar file-based routing, better DX)
  2. **Alternative**: Use Astro (static-first with optional SSR)
  3. **Workaround**: Continue using deprecated adapter (no future support)

### ✅ Supported Frameworks

**SvelteKit**:
- Use `@sveltejs/adapter-cloudflare`
- Access bindings via `platform.env` in server load functions
- Set `platform: 'cloudflare'` in `svelte.config.js`

**Astro**:
- Built-in Cloudflare adapter
- Access bindings via `Astro.locals.runtime.env`

**Nuxt**:
- Set `nitro.preset: 'cloudflare-pages'` in `nuxt.config.ts`
- Access bindings via `event.context.cloudflare.env`

**Qwik, Solid Start**:
- Built-in or official Cloudflare adapters available
- Check respective framework docs for binding access

## Debugging

```typescript
// Log request details
console.log('Request:', { method: request.method, url: request.url });
console.log('Env:', Object.keys(env));
console.log('Params:', params);
```

**View logs**: `npx wrangler pages deployment tail --project-name=my-project`

## Smart Placement Issues

### Increased Cold Start Latency

**Problem**: First requests slower after enabling Smart Placement  
**Cause**: Initial optimization period while system learns traffic patterns  
**Solution**: Expected behavior during first 24-48 hours; monitor latency trends over time

### Inconsistent Response Times

**Problem**: Latency varies significantly across requests during initial deployment  
**Cause**: Smart Placement testing different execution locations to find optimal placement  
**Solution**: Normal during learning phase; stabilizes after traffic patterns emerge (1-2 days)

### No Performance Improvement

**Problem**: Smart Placement enabled but no latency reduction observed  
**Cause**: Traffic evenly distributed globally, or no data locality constraints  
**Solution**: Smart Placement most effective with centralized data (D1/DO) or regional traffic; disable if no benefit

## Remote Bindings Issues

### Accidentally Modified Production Data

**Problem**: Local dev with `--remote` altered production database/KV  
**Cause**: Remote bindings connect directly to production resources; writes are real  
**Solution**: 
- Use `--remote` only for read-heavy debugging
- Create separate preview environments for testing
- Never use `--remote` for write operations during development

### Remote Binding Auth Errors

**Problem**: `npx wrangler pages dev --remote` fails with "Unauthorized" or auth error  
**Cause**: Not logged in, session expired, or insufficient account permissions  
**Solution**: 
1. Run `npx wrangler login` to re-authenticate
2. Verify account has access to project and bindings
3. Check binding IDs match production configuration

### Slow Local Dev with Remote Bindings

**Problem**: Local dev server slow when using `--remote`  
**Cause**: Every request makes network calls to production bindings  
**Solution**: Use local bindings for development; reserve `--remote` for final validation

## Common Errors

### "Module not found"
**Cause**: Dependencies not bundled or build output incorrect  
**Solution**: Check build output directory, ensure dependencies bundled

### "Binding not found"
**Cause**: Binding not configured or types out of sync  
**Solution**: Verify wrangler.jsonc, run `npx wrangler types`

### "Request exceeded CPU limit"
**Cause**: Code execution too slow or heavy compute  
**Solution**: Optimize hot paths, upgrade to Workers Paid

### "Script too large"
**Cause**: Bundle size exceeds limit  
**Solution**: Tree-shake, use dynamic imports, code-split

### "Too many subrequests"
**Cause**: Exceeded 50 subrequest limit  
**Solution**: Batch or reduce fetch calls

### "KV key not found"
**Cause**: Key doesn't exist or wrong namespace  
**Solution**: Check namespace matches environment

### "D1 error"
**Cause**: Wrong database_id or missing migrations  
**Solution**: Verify config, run `wrangler d1 migrations list`

## Limits Reference (Jan 2026)

| Resource | Free | Paid |
|----------|------|------|
| Functions Requests | 100k/day | Unlimited |
| CPU Time | 10ms/req | 30ms/req |
| Memory | 128MB | 128MB |
| Script Size | 1MB | 10MB |
| Subrequests | 50/req | 1,000/req |
| Deployments | 500/month | 5,000/month |

**Tip**: Hitting CPU limit? Optimize hot paths or upgrade to Workers Paid plan.

[Full limits](https://developers.cloudflare.com/pages/platform/limits/)

## Getting Help

1. Check [Pages Docs](https://developers.cloudflare.com/pages/)
2. Search [Discord #functions](https://discord.com/channels/595317990191398933/910978223968518144)
3. Review [Workers Examples](https://developers.cloudflare.com/workers/examples/)
4. Check framework-specific docs/adapters