Minhajul Anwar's Blog

2025, Sep 05    

browser bundle এ module একবার evaluate হয়ে cache হয়ে যায়। আলাদা bundle chunk-এ পড়ে গেলে বা tree-shaking/config এর কারণে একই মডিউল বারবার evaluate হতে পারে


সম্ভাব্য কারণ

1. Relative import path mismatch

এক জায়গায় এভাবে:

import { registry } from "./registry.js";

আর অন্য জায়গায়:

import { registry } from "../some/../registry.js";

→ Next.js আলাদা module মনে করবে, তাই দুবার load হবে।

✅ সমাধান: সব জায়গায় একদম একই import path ব্যবহার করুন। যদি দরকার হয় alias (@/registry) সেট করুন।


2. Hot reload / Fast Refresh (Next.js Dev mode)

Dev mode এ React Fast Refresh এর কারণে কিছু module re-evaluate হতে পারে। Production build (next build && next start) এ সাধারণত এই সমস্যা থাকে না।


3. Dynamic import / async chunk split

যদি আপনি কোথাও করেন:

await import("./registry.js");

এবং অন্য কোথাও static import করেন:

import { registry } from "./registry.js";

→ আলাদা chunks এ split হয়ে multiple evaluate হতে পারে।


4. Server + Client দুটোতেই evaluate হচ্ছে, কিন্তু console এ দেখাচ্ছে client থেকে

Next.js App Router এ অনেক code server-client boundary mix করে। একি registry ফাইল যদি "use client" component এ import করা হয়, আবার server code এও import করা হয় → দুবার evaluate হয় (server copy + client copy)।


Debug করার উপায়

console.log দিন:

console.log("Registry module evaluated", Date.now());

class Registry {
  constructor() {
    console.log("Registry constructor called", Date.now());
    this.overrides = new Map();
  }
  register(key, fn) {
    this.overrides.set(key, fn);
  }
  resolve(key) {
    return this.overrides.get(key);
  }
}

export const registry = new Registry();
  • “Registry module evaluated” কয়বার আসে?
  • কয়েকবার আসলে তবে import path mismatch / multiple chunk issue।
  • শুধু constructor বারবার আসলে, Fast Refresh / HMR issue হতে পারে।