# Error Patterns

Common errors and their fixes.

## TypeScript Errors

### Type 'X' is not assignable to type 'Y'

```typescript
// Error: Type 'string | undefined' not assignable to 'string'
const value: string = maybeString; // ❌

// Fix: Handle undefined case
const value: string = maybeString ?? 'default'; // ✅
const value = maybeString!; // If you're certain it exists
```

### Property 'X' does not exist on type 'Y'

```typescript
// Error
element.customProp = value; // ❌

// Fix: Type assertion or interface extension
(element as CustomElement).customProp = value;
```

### Cannot find module 'X'

```bash
# Check if installed
pnpm list <package>

# Install if missing
pnpm add <package>

# If type-only package
pnpm add -D @types/<package>
```

## Runtime Errors

### undefined is not a function

**Cause**: Calling a method on undefined/null

```typescript
// Error
this.handler(); // handler is undefined

// Fix: Check existence
this.handler?.();

// Or ensure it's set
this.handler = this.handleClick.bind(this);
```

### Cannot read property 'X' of undefined

**Cause**: Accessing property on undefined

```typescript
// Error
user.name // user is undefined

// Fix: Optional chaining
user?.name

// Or nullish coalescing
const name = user?.name ?? 'Anonymous';
```

## Build Errors

### Module not found

**Causes:**
- Typo in import path
- Missing file extension
- Missing dependency

```typescript
// Check relative paths
import './component.ts';     // ❌ Don't include .ts
import './component';        // ✅

// Check case sensitivity (matters on Linux/CI)
import './Component';        // ❌ if file is component.ts
import './component';        // ✅
```

### Circular dependency

**Symptoms:** Module evaluates to undefined

```typescript
// a.ts imports b.ts, b.ts imports a.ts

// Fix: Extract shared code to third module
// shared.ts <- both import from here
```

## FAST Element Errors

### Element not registering

```typescript
// Ensure customElement decorator is present
@customElement({ name: 'app-my-element', template, styles })
export class MyElement extends FASTElement {}

// Ensure element is imported somewhere
import './components/my-element';
```

### Template binding not updating

```typescript
// Ensure property is observable
@observable myProp = '';  // ✅

// Plain property won't be reactive
myProp = '';  // ❌
```

## Network Errors

### CORS error

```
Access-Control-Allow-Origin header missing
```

**Fixes:**
1. Server needs CORS headers
2. Use proxy in development
3. Same-origin request

### 401 Unauthorized

- Check auth token exists
- Check token not expired
- Check token sent in correct header
