NextJs and MikroORM; Cannot use import statement outside a module

Question

NextJs and MikroORM; SyntaxError: Cannot use import statement outside a module

Issue

I am looking to integrate MikroORM v6.3.13 into a NextJS v14.2.14 project. The main issue have is the following. For now I am trying to just get everything set up. I made a basic API where I want to populate the SectionEntity:

export const dynamic = "force-dynamic";
export async function GET() {
    const orm = await MikroORM.init(config);
    const em = orm.em.fork();

    try {
        const section = new SectionEntity();
        section.locale = "en";
        section.page = "test";
        section.type = "form";
        section.key = "test_section";

        await em.persistAndFlush(section);

        console.log(section.createdAt);
        return NextResponse.json("SUCCESS", { status: 200 });
    } catch (error) {
        return NextResponse.json({ error: `${error}` }, { status: 500 });
    }
}

I am facing this error:

import { Entity, PrimaryKey, Property, ManyToOne, type Rel } from "@mikro-orm/core";

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1279:20)
    at Module._compile (node:internal/modules/cjs/loader:1331:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at Module.require (node:internal/modules/cjs/loader:1230:19)
    at mod.require (C:\Projects\mikroorm-basic\node_modules\next\dist\server\require-hook.js:65:28)
    at require (node:internal/modules/helpers:179:18)

My mikro-orm configuraion seems to be working which I can verify when running npx mikro-orm-esm debug:

Current MikroORM CLI configuration
    - dependencies:
      - mikro-orm 6.3.13
      - node 21.7.1
      - knex 3.1.0
      - pg 8.13.0
      - typescript 5.6.2
    - package.json found
    - ts-node enabled
    - searched config paths:
      - C:/Projects/mikroorm-basic/src/mikro-orm.config.ts (not found)
      - C:/Projects/mikroorm-basic/mikro-orm.config.ts (found)
      - C:/Projects/mikroorm-basic/src/mikro-orm.config.js (not found)
      - C:/Projects/mikroorm-basic/mikro-orm.config.js (not found)
    - configuration found
    - database connection successful
    - will use `entities` array (contains 0 references and 1 paths)
      - C:/Projects/mikroorm-basic/server/entities (found)

Entities

These are my entities, defined within the folder ./server/entities:

import { Entity, PrimaryKey, Property, OneToMany, Collection } from "@mikro-orm/core";
import type { SectionType } from "../types/PageContent";
import ContentEntity from "./content.entity";

@Entity()
export default class SectionEntity {
    @PrimaryKey()
    id!: number;

    @Property()
    locale!: string;

    @Property()
    page!: string;

    @Property()
    type!: SectionType;

    @Property()
    key!: string;

    @OneToMany(() => ContentEntity, (content) => content.section)
    contents = new Collection<ContentEntity>(this);

    @Property()
    createdAt: Date = new Date();
}

import {
    Entity,
    PrimaryKey,
    Property,
    ManyToOne,
    type Rel
} from "@mikro-orm/core";
import type { ContentType } from "../types/PageContent";
import SectionEntity from "./sections.entity";

@Entity()
export default class ContentEntity {
    @PrimaryKey()
    id!: number;

    @ManyToOne({ entity: () => SectionEntity })
    section!: Rel<SectionEntity>;

    @Property()
    type!: ContentType;

    @Property()
    key!: string;

    @Property()
    body!: string;

    @Property()
    createdAt: Date = new Date();
}

Project TS Config

As I saw this mentioned in other issues regarding MicroORM with NextJS, I did some digging. Most issues seem to be related to issues within config. I tried all solutions I could find, but all of them either did nothing or broke the rest of the project. Some solutions talked about adding "type": "module" but this broke the rest of the proejct again.

This is my tsconfig:

{
    "compilerOptions": {
        "target": "ES2022",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "noEmit": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "bundler",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "plugins": [
            {
                "name": "next"
            }
        ],
        "paths": {
            "@/*": ["./*"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
    "exclude": ["node_modules"]
}

I tried to resolve this myself by looking at different solutions, most of which are rather old and if they use NextJs, it is with pages router.

Some examples where I looked for a solution:

• MikroORM Docs
• GH Issue
• NextJS Example from Docs

Answer 1

BTW It was decided to ditch MikroORM as it is not worth the extra effort. Switched to Prisma ORM

Answer 2

Solution

Ok so after some more trial and error, trying to figure out what a solution for using MikroORM with Next 14 app directory could be I figured it out. I actually mostly ignored what I found in the provided links in the issue. In the end it was probably a setup issue. It seems like MikroORM wants each entity defined in the entities array, despite the docs stating in the docs you could import the whole folder with the entities inside.

Setup of NextJS app dir with MikroORM

In case you want to start a project using MikroORM with NextJS I suggest you use this template here: MikroORM NextJS 14 Template

It´s not my repo but this is the way I did it to get it to work.