Files

Thomas Hallock bda5bc6c0e fix: prevent database imports from being bundled into client code

**Problem:**
- player-ownership.ts imported drizzle-orm and @/db at top level
- When RoomMemoryPairsProvider imported client-safe utilities, Webpack bundled ALL imports including database code
- This caused hydration error: "The 'original' argument must be of type Function"
- Node.js util.promisify was being called in browser context

**Solution:**
1. Created player-ownership.client.ts with ONLY client-safe utilities
   - No database imports
   - Safe to import from 'use client' components
   - Contains: buildPlayerOwnershipFromRoomData(), buildPlayerMetadata(), helper functions

2. Updated player-ownership.ts to re-export client utilities and add server-only functions
   - Re-exports everything from .client.ts
   - Adds buildPlayerOwnershipMap() (async, database-backed)
   - Safe to import from server components/API routes

3. Updated RoomMemoryPairsProvider to import from .client.ts

**Result:**
- No more hydration errors on /arcade/room
- Client bundle doesn't include database code
- Server code can still use both client and server utilities

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-10-10 11:40:46 -05:00

2.4 KiB

Raw Blame History

Linting & Formatting Setup

This project uses Biome for formatting and general linting, with ESLint handling React Hooks rules only.

Tools

@biomejs/biome - Fast formatter + linter + import organizer
eslint + eslint-plugin-react-hooks - React Hooks validation only

Scripts

# Check formatting and lint (non-destructive)
npm run check

# Lint all files
npm run lint

# Fix lint issues
npm run lint:fix

# Format all files
npm run format

# Check formatting (dry run)
npm run format:check

Configuration Files

biome.jsonc - Biome configuration (format + lint)
eslint.config.js - Minimal ESLint flat config for React Hooks only
.gitignore - Includes patterns for Biome cache

What Each Tool Does

Biome

Code formatting (Prettier-compatible)
General JavaScript/TypeScript linting
Import organization (alphabetical, remove unused)
Dead code detection
Performance optimizations

ESLint (React Hooks only)

react-hooks/rules-of-hooks - Ensures hooks are called unconditionally
react-hooks/exhaustive-deps - Warns about incomplete dependency arrays

IDE Integration

VS Code

Install the Biome extension:

code --install-extension biomejs.biome

Add to .vscode/settings.json:

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

CI/CD

Add to your GitHub Actions workflow:

- name: Lint
  run: npm run lint

- name: Check formatting
  run: npm run format:check

Migration from ESLint + Prettier

This setup replaces most ESLint and Prettier functionality:

✅ Removed eslint-config-next inline config from package.json
✅ No .eslintrc.js or .prettierrc files needed
✅ ESLint now only runs React Hooks rules
✅ Biome handles all formatting and general linting

Why This Setup?

Speed - Biome is 10-100x faster than ESLint + Prettier
Simplicity - Single tool for most concerns
Accuracy - ESLint still catches React-specific issues Biome can't yet handle
Low Maintenance - Minimal config overlap

Customization

To add custom lint rules, edit:

biome.jsonc for general rules
eslint.config.js for React Hooks rules

2.4 KiB Raw Blame History