Collecting page data ...ReferenceError: Cannot access 'u' before initialization

[adriancuadrado]

Summary

1. Create a new NextJS app with these choices:

   $ npx create-next-app
   
   ✔ What is your project named? … my-app
   ✔ Would you like to use TypeScript? … Yes
   ✔ Would you like to use ESLint? … Yes
   ✔ Would you like to use Tailwind CSS? … Yes
   ✔ Would you like your code inside a `src/` directory? … Yes
   ✔ Would you like to use App Router? (recommended) … Yes
   ✔ Would you like to use Turbopack for `next dev`? … No
   ✔ Would you like to customize the import alias (`@/*` by default)? … No
   

2. Install MikroORM

   1. Install the npm dependencies:

      npm install @mikro-orm/core @mikro-orm/sqlite
      

   2. Add these to tsconfig.json:

      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "esModuleInterop": true,
      

3. Delete src/app/page.tsx and src/app/layout.tsx and create these files:

   src/entities/EntityA.ts

   import { EntityB } from "@/entities";
   import { Collection, Entity, OneToMany, PrimaryKey } from "@mikro-orm/core";
   
   @Entity({ tableName: "a" })
   export class EntityA {
     @PrimaryKey()
     id!: number;
   
     @OneToMany(() => EntityB, (b) => b.a)
     bs = new Collection<EntityB>(this);
   }

   src/entities/EntityB.ts

   import { EntityA } from "@/entities";
   import { Entity, ManyToOne, PrimaryKey } from "@mikro-orm/core";
   
   @Entity({ tableName: "b" })
   export class EntityB {
     @PrimaryKey()
     id!: number;
   
     @ManyToOne(() => EntityA)
     a!: EntityA;
   }

   src/entities/index.ts

   export { EntityA } from "./EntityA";
   export { EntityB } from "./EntityB";

   src/app/route.ts

   import { EntityA, EntityB } from "@/entities";
   import { MikroORM } from "@mikro-orm/sqlite";
   import { NextResponse } from "next/server";
   
   let orm: MikroORM | null = null;
   
   export async function GET() {
     if (!orm) {
       orm = await MikroORM.init({
         entities: [EntityA, EntityB],
         dbName: "test.sqlite",
       });
     }
     const em = orm.em.fork();
     await em.persistAndFlush(new EntityA());
     return NextResponse.json({ message: "Hello world!" });
   }

If at this point you run npm run build everything works wonderfully.

Now let's do something funny. Let's change the imports of the entities to reference them directly instead of through index.ts:

src/entities/EntityA.ts

// import { EntityB } from "@/entities";
import { EntityB } from "./EntityB";

src/entities/EntityB.ts

// import { EntityA } from "@/entities";
import { EntityA } from "./EntityA";

Now, believe it or not, for some reason that is beyond me, this just doesn't build. If you run npm run build now you'll get this error:

$ npm run build

> [email protected] build
> next build

   ▲ Next.js 15.3.5

   Creating an optimized production build ...
 ✓ Compiled successfully in 0ms
 ✓ Linting and checking validity of types    
   Collecting page data  ...ReferenceError: Cannot access 'u' before initialization
    at Object.N (.next/server/app/route.js:20:14349)
    at <unknown> (.next/server/app/route.js:13:6148)

> Build error occurred
[Error: Failed to collect page data for /] { type: 'Error' }

I've spent 2 whole days trying to replicate this error with as little code as possible to understand what is going on and this is the smallest amount of code I've managed to replicate this problem with.

I know I can fix it by changing the imports but I want to know:

IF IMPORTING DIRECTLY OR THROUGH INDEX.TS IS THE SAME, WHY DOES THIS HAPPEN?

Additional information

Operating System:
  Platform: linux
  Arch: x64
  Version: #29~24.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Jun 26 14:16:59 UTC 2
  Available memory (MB): 7273
  Available CPU cores: 4
Binaries:
  Node: 22.13.1
  npm: 11.4.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.5 // Latest available version is detected (15.3.5).
  eslint-config-next: 15.3.5
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Example

No response

[adriancuadrado]

I wasn't sure if I should create this discussion here or in the MikroORM repository because this problem involves both NextJS and MikroORM, so I've decided to create a discussion here and bring attention to that discussion from mikro-orm/mikro-orm#6745. If you want to help please provide your answer here to keep things centralized.

[icyJoseph]

My first impression is circular dependencies - and the decorators somehow trying to access either A or B through the callbacks (likely that OneToMany decorator).

Like, I imagine your entities.ts file is working as an internals.js described in this article, https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de#9afb

Also, if you wanna know exactly where the error is I think you can turn off server minification, experimental.serverMinification: false in your next.config.js (or ts) file

[adriancuadrado]

I know I can fix this problem using index.ts, but now I have another problem. When I build with next build and start with next start and go to http://localhost:3000/ I get this error:

⨯ Error [MetadataError]: Duplicate entity names are not allowed: u

I can fix it by putting all entities directly in index.ts instead of using it to reexport the entities from their corresponding files:

index.ts

// export { EntityA } from "./EntityA";
// export { EntityB } from "./EntityB";

import {
  Collection,
  Entity,
  ManyToOne,
  OneToMany,
  PrimaryKey,
} from "@mikro-orm/core";

@Entity({ tableName: "a" })
export class EntityA {
  @PrimaryKey()
  id!: number;

  @OneToMany(() => EntityB, (b) => b.a)
  bs = new Collection<EntityB>(this);
}

@Entity({ tableName: "b" })
export class EntityB {
  @PrimaryKey()
  id!: number;

  @ManyToOne(() => EntityA)
  a!: EntityA;
}

But why the fuck is this happening now? This problem seems more mikro-orm related than nextjs, so I'll post this question in their repo: mikro-orm/mikro-orm#6748