[EXPERIMENTAL/V5 (+Next 14)]: Build fails because of Database Adapter

[theopomies]

Environment

System:
OS: macOS 14.1
CPU: (10) arm64 Apple M1 Pro
Memory: 115.56 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
pnpm: 8.10.0 - ~/Library/pnpm/pnpm
Watchman: 2023.10.09.00 - /opt/homebrew/bin/watchman
Browsers:
Brave Browser: 112.1.50.121
Chrome: 116.0.5845.187
Safari: 17.1

ALSO HAPPENS IN DOCKER

Reproduction URL

https://github.com/theopomies/self-hosted-nextjs

Describe the issue

I'm trying to make a reusable template for myself to self-host projects using Next, Docker, Drizzle, Postgres and NextAuth

When docker compose tries to build it hits parts of the codebase that require a DB connection, for example in db/index.ts, following the drizzle docs, I have the following:

import * as schema from "./schema";
import { drizzle } from "drizzle-orm/postgres-js";
import { migrate } from "drizzle-orm/postgres-js/migrator";
import postgres from "postgres";
import dotenv from "dotenv";

dotenv.config();

const connectionString = process.env.DATABASE_URL;

if (!connectionString) {
  throw new Error("DATABASE_URL is not set (src/db/index.ts)");
}

const sql = postgres(connectionString, { max: 1 });
export const db = drizzle(sql, {
  schema,
});

await migrate(db, { migrationsFolder: "drizzle" });

This code is referenced by NextAuth/Auth.js with

 ...
export const {
  auth,
  handlers: { GET, POST },
} = NextAuth({
  ...authConfig,
  adapter: DrizzleAdapter(db),
});
  ...

Itself referenced by an api route to create a 'protected' route and the default /api/auth/[...nextauth]/route.ts.

During the build step, the 'db' service of my docker compose is not yet up, neither should it be, and so, the migration line and the api route raise errors, along with the fact that process.env.DATABASE_URL also doesn't exist (yet), as docker-compose injects env vars at runtime, not build time, but these lines, I suppose, shouldn't be referenced anyways.

The error looks like that:

Collecting page data ...
11.14 Error: DATABASE_URL is not set (src/db/index.ts) <== Thrown by me
11.14     at 9498 (/app/.next/server/app/api/protected/route.js:1:2689)
11.14     at __webpack_require__ (/app/.next/server/webpack-runtime.js:1:145)
11.14     at __webpack_exec__ (/app/.next/server/app/api/protected/route.js:1:3641)
11.14     at /app/.next/server/app/api/protected/route.js:1:3680
11.14     at __webpack_require__.X (/app/.next/server/webpack-runtime.js:1:1623)
11.14     at /app/.next/server/app/api/protected/route.js:1:3654
11.14     at Object.<anonymous> (/app/.next/server/app/api/protected/route.js:1:3722)
11.14     at Module._compile (node:internal/modules/cjs/loader:1256:14)
11.14     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
11.14     at Module.load (node:internal/modules/cjs/loader:1119:32)
11.14 
11.14 > Build error occurred
11.14 Error: Failed to collect page data for /api/protected
11.14     at /app/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/utils.js:1211:15
11.14     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
11.14   type: 'Error'
11.14 }
11.17 error Command failed with exit code 1.
11.17 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

How to reproduce

To reproduce, create a new Next.js 14 project, with drizzle-orm, next-auth@beta (v5) and Postgres.

Following the migration docs, create the auth.config.ts, auth.ts and middleware.ts files, the schema, and finally your API Route, based on the docs.

If you now try to build your project without the database being up (or simply by commenting your DATABASE_URL from your .env), you should encounter the same issue as I did, showing that with this setup, you need a valid database connection at build time (!)

Expected behavior

Database connection should not be required at build time, I suppose, or else I'd love to know the fix or my mistake, thanks!

Best,
Théo POMIES

[balazsorban44]

Hmm.You did add a env variable check though, so this is expected and unrelated to NextAuth.js. You could move the typencheck to something like https://env.t3.gg/docs/introduction and make it optional, but this is out of scope for Auth.js

[theopomies]

Agreed but the issue here isn't env related, rather the fact that during the build step of Next (14) and with the setup recommended by next-auth@beta (v5) with a database adapter, here DrizzleOrm, through a chain of import going from /api/auth/[...nextauth]/route.ts -> auth.ts -> db/index.ts, it tries to initiate a db connection at build time...
Is it a normal behavior ? Removing the db from next-auth fixes it but is the issue next-related or next-auth ? Or am I doing something wrong and not grasping the concepts properly and there isn't actually any framework issue ?

Appreciate your time and efforts!

[theopomies]

Just to keep you posted @balazsorban44, this is related to Drizzle and/or DrizzleAdapter, and the way the client works, using Prisma the same code runs fine.

[clburlison]

Hey @theopomies looks like you swapped your demo repo over to Prisma due to this issue. I ran into the same problem with Drizzle when trying to build with this Next Auth adapter.

The core problem as you state is the Drizzle client is trying to make a mysql connection during the build process which fails. I was able to fix this by replacing

import { drizzle } from 'drizzle-orm/mysql2'
import mysql from 'mysql2/promise'

import { env } from '#/env.mjs'

import * as schema from './schema'

export const db = drizzle(
  await mysql.createConnection({
    uri: env.DATABASE_URL,
  }),
  { schema, mode: 'default' },
)

with

import { type MySql2Client, drizzle } from 'drizzle-orm/mysql2'
import mysql from 'mysql2/promise'

import { env } from '#/env.mjs'

import * as schema from './schema'

async function createDbConnection() {
  if (process.env.SKIP_ENV_VALIDATION) {
    const mockConnection = {} as unknown as MySql2Client
    return drizzle(mockConnection, { schema, mode: 'default' })
  }

  const connection = await mysql.createConnection({
    uri: env.DATABASE_URL,
  })

  return drizzle(connection, { schema, mode: 'default' })
}

export const db = await createDbConnection()

Now when nextjs builds the project with SKIP_ENV_VALIDATION=1 npm run build it uses the Mocked database connection and compiles properly. Obviously a little bit of a hack but solved the core issue over here.

[Mik3y-F]

Hey @clburlison any chance you could show a postgres equivalent?

[Mik3y-F]

I tried this approach

import * as schema from "./schema";

import {
  type NodePgClient,
  drizzle,
  type NodePgDatabase,
} from "drizzle-orm/node-postgres";

import { Client } from "pg";
import { env } from "~/env";
import postgres from "postgres";
import { sql } from "@vercel/postgres";
import { drizzle as vercelDrizzle } from "drizzle-orm/vercel-postgres";

/**
 * Cache the database connection in development. This avoids creating a new connection on every HMR
 * update.
 */
const globalForDb = globalThis as unknown as {
  conn: postgres.Sql | undefined;
};

const pgClient = new Client({
  connectionString: env.POSTGRES_URL,
});

const conn = globalForDb.conn ?? postgres(env.POSTGRES_URL);
if (env.NODE_ENV !== "production") globalForDb.conn = conn;

function getDB() {
  if (process.env.SKIP_ENV_VALIDATION) {
    const mockConnection = {} as unknown as NodePgClient;
    return drizzle(mockConnection, { schema });
  }

  if (env.ENVIRONMENT !== "vercel") {
    let db: NodePgDatabase<typeof schema> | undefined;
    pgClient
      .connect()
      .then(() => (db = drizzle(pgClient, { schema })))
      .catch((err) => console.error(err));

    if (!db) throw new Error("Database connection failed");

    return db;
  }

  return vercelDrizzle(sql, { schema });
}

export const db = getDB();

but it kept giving me this error on build

69.15 TypeError: n.query is not a function
69.15     at /app/.next/server/chunks/610.js:30:6655
69.15     at Object.startActiveSpan (/app/.next/server/chunks/610.js:36:27008)
69.15     at /app/.next/server/chunks/610.js:30:6491
69.15     at Object.startActiveSpan (/app/.next/server/chunks/610.js:36:27008)
69.15     at p.execute (/app/.next/server/chunks/610.js:30:6046)
69.15     at /app/.next/server/chunks/610.js:30:23658
69.15     at Object.startActiveSpan (/app/.next/server/chunks/610.js:36:27008)
69.15     at b.execute (/app/.next/server/chunks/610.js:30:23602)
69.15     at b.then (/app/.next/server/chunks/610.js:30:18449) {
69.15   digest: '14370097'
69.15 }