HMR Issues

# Nothing happens after file modification

# Stop with Ctrl+C and restart
pnpm dev

// src/bin/hmr-hook-register.ts
if (process.env.HOT === "yes" && process.env.API_ROOT_PATH) {
  const { hot } = await import("@sonamu-kit/hmr-hook");

  await hot.init({
    rootDirectory: process.env.API_ROOT_PATH,
    boundaries: [`./src/**/*.ts`], // All .ts files
  });

  console.log("🔥 HMR-hook initialized");
}

# Linux
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

# macOS - Usually not needed

Error: Cannot import module /src/application/user/user.model.ts

# Install madge
pnpm add -D madge

# Check circular dependencies
pnpm madge --circular --extensions ts src/

// ❌ Circular dependency
// user.model.ts
import { PostModel } from "../post/post.model";

// post.model.ts
import { UserModel } from "../user/user.model";

// ✅ Solution: Import types only
// user.model.ts
import type { PostModel } from "../post/post.model";

// Or create common types file
// types.ts
export type { UserModel } from "./user/user.model";
export type { PostModel } from "./post/post.model";

// ❌ Dynamic import within HMR boundary
class UserModelClass extends BaseModelClass {
  async getRelated() {
    const { PostModel } = await import("../post/post.model");
    return PostModel.findMany();
  }
}

// ✅ Use static import
import { PostModel } from "../post/post.model";

class UserModelClass extends BaseModelClass {
  async getRelated() {
    return PostModel.findMany();
  }
}

Property 'newMethod' does not exist on type 'UserModel'

Command Palette (Cmd+Shift+P or Ctrl+Shift+P)
> TypeScript: Restart TS Server

Command Palette
> Developer: Reload Window

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
  }
}

// src/bin/hmr-hook-register.ts
if (process.env.HOT === "yes" && process.env.API_ROOT_PATH) {
  const { hot } = await import("@sonamu-kit/hmr-hook");

  await hot.init({
    rootDirectory: process.env.API_ROOT_PATH,
    boundaries: [
      // Include only frequently changed files
      `./src/application/**/*.model.ts`,
      `./src/application/**/*.helper.ts`,
    ],
  });
}

// ❌ Execute immediately on module load
const heavyData = processLargeDataset();

export class UserModelClass extends BaseModelClass {
  // ...
}

// ✅ Execute only when needed
let heavyData: any;

export class UserModelClass extends BaseModelClass {
  private getHeavyData() {
    if (!heavyData) {
      heavyData = processLargeDataset();
    }
    return heavyData;
  }
}

# Check Node.js memory usage
node --expose-gc --inspect node_modules/.bin/sonamu dev

# Memory profiling in Chrome DevTools
chrome://inspect

Error: HMR boundary pattern is invalid: /src/**/*.model.ts

// src/bin/hmr-hook-register.ts
await hot.init({
  rootDirectory: process.env.API_ROOT_PATH,
  boundaries: [
    // ✅ Correct patterns (relative paths)
    `./src/application/**/*.model.ts`,
    `./src/application/**/*.helper.ts`,

    // ❌ Invalid patterns
    // "/src/**/*.ts",  // Absolute paths don't work
    // "./src/**/*.{ts,js}",  // Brace expansion not supported
  ],
});

# Enable HMR logging
DEBUG=hmr:* pnpm dev

hmr:boundary /src/application/user/user.model.ts matched +0ms
hmr:reload Reloading module: user.model +5ms

// Restart server if there's a module cache issue

// Change filename to match HMR boundary
// user-service.ts → user.helper.ts

Error [ERR_REQUIRE_ESM]: require() of ES Module not supported

{
  "type": "module"
}

// ❌
import { UserModel } from "./user.model";

// ✅
import { UserModel } from "./user.model.js"; // Use .js for ESM

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}