How can I access `env.DB` in my Pages/Worker on production?

Baran · 2024-05-20T12:58:18.785Z

**Steps to reproduce:** 1. Clone https://github.com/cjxe/nextjs-d1-drizzle-cloudflare-pages 2. Follow `README.md`. 3. Run `pnpm start` or `pnpm pages:prod`. 4. Launch the web app using your favourite browser. **Error:** ``` [Error: Failed to retrieve the Cloudflare request context.] [Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] { digest: '3614312654' }``` I don't get this error when I run on `dev` due to how `next.config.mjs` is set up, but I can't make this work on production. The main issue is the Cloudflare pages return an error when it tries running `getRequestContext().env.DB` in `src/server/db/index.ts`.

L

laurent•5/20/24, 4:52 PM

src/db/

import * as schema from "@/db/schema/schema";
import { getRequestContext } from "@cloudflare>/next-on-pages";
import { drizzle } from "drizzle-orm/d1";
export const runtime = "edge";

function getDB() {
    if (process.env.NODE_ENV === "development") {
        const { env } = getRequestContext();
        //@ts-ignore
        return drizzle(env.DB, { schema });
    }
    // Production
    //@ts-ignore
    return drizzle(process.env.DB, { schema });
}

export const db = getDB();

src/db/

import * as schema from "@/db/schema/schema";
import { getRequestContext } from "@cloudflare>/next-on-pages";
import { drizzle } from "drizzle-orm/d1";
export const runtime = "edge";

function getDB() {
    if (process.env.NODE_ENV === "development") {
        const { env } = getRequestContext();
        //@ts-ignore
        return drizzle(env.DB, { schema });
    }
    // Production
    //@ts-ignore
    return drizzle(process.env.DB, { schema });
}

export const db = getDB();

src/db/

import * as schema from "@/db/schema/schema";
import { getRequestContext } from "@cloudflare>/next-on-pages";
import { drizzle } from "drizzle-orm/d1";
export const runtime = "edge";

function getDB() {
    if (process.env.NODE_ENV === "development") {
        const { env } = getRequestContext();
        //@ts-ignore
        return drizzle(env.DB, { schema });
    }
    // Production
    //@ts-ignore
    return drizzle(process.env.DB, { schema });
}

export const db = getDB();

src/db/

import * as schema from "@/db/schema/schema";
import { getRequestContext } from "@cloudflare>/next-on-pages";
import { drizzle } from "drizzle-orm/d1";
export const runtime = "edge";

function getDB() {
    if (process.env.NODE_ENV === "development") {
        const { env } = getRequestContext();
        //@ts-ignore
        return drizzle(env.DB, { schema });
    }
    // Production
    //@ts-ignore
    return drizzle(process.env.DB, { schema });
}

export const db = getDB();

L

laurent•5/20/24, 4:55 PM

wrangler.toml 

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "prod-dbname"
database_id = "123



  [[env.production.d1_databases]]
  database_id = "123"
  binding = "DB"
  database_name = "DB"

wrangler.toml 

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "prod-dbname"
database_id = "123



  [[env.production.d1_databases]]
  database_id = "123"
  binding = "DB"
  database_name = "DB"

wrangler.toml 

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "prod-dbname"
database_id = "123



  [[env.production.d1_databases]]
  database_id = "123"
  binding = "DB"
  database_name = "DB"

wrangler.toml 

[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "prod-dbname"
database_id = "123



  [[env.production.d1_databases]]
  database_id = "123"
  binding = "DB"
  database_name = "DB"

Llaurent ```src/db/ import * as schema from "@/db/schema/schema"; import { getRequestCon...

B

BaranOP•5/20/24, 4:58 PM

Thanks for the reply!

I made your suggested changes, and the terminal threw this error:

TypeError: Cannot read properties of undefined (reading 'prepare')

TypeError: Cannot read properties of undefined (reading 'prepare')

TypeError: Cannot read properties of undefined (reading 'prepare')

TypeError: Cannot read properties of undefined (reading 'prepare')

L

laurent•5/20/24, 5:00 PM

what's calling the database? how is it imported?

Llaurent what's calling the database? how is it imported?

B

BaranOP•5/20/24, 5:01 PM

db/index.ts: https://github.com/cjxe/nextjs-d1-drizzle-cloudflare-pages/blob/main/src/server/db/index.ts
server action where the db is called: https://github.com/cjxe/nextjs-d1-drizzle-cloudflare-pages/blob/main/src/server/functions/customers.ts

B

BaranOP•5/20/24, 5:02 PM

i can do a 5 minute demo on screen share if you have some time

L

laurent•5/20/24, 5:05 PM

can you try a simple api route like that?

the db is the one exported above

import { db } from "@/db/drizzleDB";
import { cities } from "@/db/schema/schema";
import type { NextRequest } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {

    const result = await db.select().from(cities);

    return Response.json({ result });
}

import { db } from "@/db/drizzleDB";
import { cities } from "@/db/schema/schema";
import type { NextRequest } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {

    const result = await db.select().from(cities);

    return Response.json({ result });
}

import { db } from "@/db/drizzleDB";
import { cities } from "@/db/schema/schema";
import type { NextRequest } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {

    const result = await db.select().from(cities);

    return Response.json({ result });
}

import { db } from "@/db/drizzleDB";
import { cities } from "@/db/schema/schema";
import type { NextRequest } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {

    const result = await db.select().from(cities);

    return Response.json({ result });
}

B

BaranOP•5/20/24, 5:06 PM

sure, 2 secs

Llaurent can you try a simple api route like that? the db is the one exported above ```...

B

BaranOP•5/20/24, 5:09 PM

how would you like me to fetch in the front end, navigate to the endpoint in the browser?

L

laurent•5/20/24, 5:12 PM

to test the api route you use something like postman and call GET localhost:3000/api/something

L

laurent•5/20/24, 5:12 PM

I use thunder client in vscode

B

BaranOP•5/20/24, 5:13 PM

B

BaranOP•5/20/24, 5:13 PM

i am getting the same error

B

BaranOP•5/20/24, 5:13 PM

both thunder client and my browser returned the same

L

laurent•5/20/24, 5:13 PM

are you exporting the db object as I showed you?

B

BaranOP•5/20/24, 5:13 PM

i mean the server returned the sam error, the browser and thunder client returned "500 internal server error"

B

BaranOP•5/20/24, 5:14 PM

L

laurent•5/20/24, 5:14 PM

did you double check your wrangler.toml values for the db?

B

BaranOP•5/20/24, 5:16 PM

i am shaking

B

BaranOP•5/20/24, 5:17 PM

[[d1_databases]] # <-- i had to rename this from `env.production.d1_databases` to `d1_databases`
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "TBA" # When you create your D1 DB, you choose the name
database_id = "TBA"
preview_database_id = "DB"

[[d1_databases]] # <-- i had to rename this from `env.production.d1_databases` to `d1_databases`
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "TBA" # When you create your D1 DB, you choose the name
database_id = "TBA"
preview_database_id = "DB"

[[d1_databases]] # <-- i had to rename this from `env.production.d1_databases` to `d1_databases`
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "TBA" # When you create your D1 DB, you choose the name
database_id = "TBA"
preview_database_id = "DB"

[[d1_databases]] # <-- i had to rename this from `env.production.d1_databases` to `d1_databases`
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "TBA" # When you create your D1 DB, you choose the name
database_id = "TBA"
preview_database_id = "DB"

B

BaranOP•5/20/24, 5:17 PM

thank you very much

L

laurent•5/20/24, 5:17 PM

do you see a database there?

B

BaranOP•5/20/24, 5:17 PM

i even got the api response

B

BaranOP•5/20/24, 5:17 PM

B

BaranOP•5/20/24, 5:18 PM

L

laurent•5/20/24, 5:18 PM

ah ok good!

Llaurent ah ok good!

B

BaranOP•5/20/24, 5:21 PM

whats your wrangler command to connect to the production database?

L

laurent•5/20/24, 5:22 PM

I copied it above

B

BaranOP•5/20/24, 5:22 PM

oh

B

BaranOP•5/20/24, 5:22 PM

i meant something like

pnpm wrangler pages dev --env production .vercel/output/static

pnpm wrangler pages dev --env production .vercel/output/static

pnpm wrangler pages dev --env production .vercel/output/static

pnpm wrangler pages dev --env production .vercel/output/static

L

laurent•5/20/24, 5:23 PM

I don't think you can

L

laurent•5/20/24, 5:23 PM

https://developers.cloudflare.com/d1/build-with-d1/local-development/

B

BaranOP•5/20/24, 5:25 PM

hm, thats a shame

BBaran ```toml [[d1_databases]] # <-- i had to rename this from `env.production.d1_data...

C

Coolio85•5/20/24, 5:48 PM

This might sound simple, but did you update these values for the d1 database you want to bind?

CCoolio85 This might sound simple, but did you update these values for the d1 database you...

B

BaranOP•5/20/24, 6:41 PM

yeah

B

BaranOP•5/20/24, 6:41 PM

that's my template and i was trying to find what was wrong with it, but thanks for checking in

C

Coolio85•5/20/24, 6:49 PM

only saying because I've definitely not done that before :hide_the_pain: :laughingpepe:

C

Coolio85•5/20/24, 6:56 PM

One thing I can suggest, is try getting rid of the conditional regarding

process.env.NODE_ENV

process.env.NODE_ENV

process.env.NODE_ENV

process.env.NODE_ENV, my nextjs pages project looks similar to this

import { getRequestContext } from "@cloudflare/next-on-pages"
import { PrismaClient } from '@prisma/client'
import { PrismaD1 } from '@prisma/adapter-d1'

const getDb = (): PrismaClient => {
    const binding = getRequestContext().env.DB;

    const adapter = new PrismaD1(binding)
    const prisma = new PrismaClient({ adapter })

    return prisma;
}

export default getDb;

import { getRequestContext } from "@cloudflare/next-on-pages"
import { PrismaClient } from '@prisma/client'
import { PrismaD1 } from '@prisma/adapter-d1'

const getDb = (): PrismaClient => {
    const binding = getRequestContext().env.DB;

    const adapter = new PrismaD1(binding)
    const prisma = new PrismaClient({ adapter })

    return prisma;
}

export default getDb;

import { getRequestContext } from "@cloudflare/next-on-pages"
import { PrismaClient } from '@prisma/client'
import { PrismaD1 } from '@prisma/adapter-d1'

const getDb = (): PrismaClient => {
    const binding = getRequestContext().env.DB;

    const adapter = new PrismaD1(binding)
    const prisma = new PrismaClient({ adapter })

    return prisma;
}

export default getDb;

import { getRequestContext } from "@cloudflare/next-on-pages"
import { PrismaClient } from '@prisma/client'
import { PrismaD1 } from '@prisma/adapter-d1'

const getDb = (): PrismaClient => {
    const binding = getRequestContext().env.DB;

    const adapter = new PrismaD1(binding)
    const prisma = new PrismaClient({ adapter })

    return prisma;
}

export default getDb;

With a wrangler file of

[[d1_databases]]
binding = "DB"
database_name = "name"
database_id = "[ID]"
preview_database_id = "[ID]"

[[env.preview.d1_databases]]
binding = "DB"
database_name = "name"
database_id = "[ID]"
preview_database_id = "[ID]"

[[d1_databases]]
binding = "DB"
database_name = "name"
database_id = "[ID]"
preview_database_id = "[ID]"

[[env.preview.d1_databases]]
binding = "DB"
database_name = "name"
database_id = "[ID]"
preview_database_id = "[ID]"

[[d1_databases]]
binding = "DB"
database_name = "name"
database_id = "[ID]"
preview_database_id = "[ID]"

[[env.preview.d1_databases]]
binding = "DB"
database_name = "name"
database_id = "[ID]"
preview_database_id = "[ID]"

[[d1_databases]]
binding = "DB"
database_name = "name"
database_id = "[ID]"
preview_database_id = "[ID]"

[[env.preview.d1_databases]]
binding = "DB"
database_name = "name"
database_id = "[ID]"
preview_database_id = "[ID]"

CCoolio85 One thing I can suggest, is try getting rid of the conditional regarding `proces...

B

BaranOP•5/20/24, 7:03 PM

i tried it, and for some reason

@cloudflare/next-on-pages

@cloudflare/next-on-pages

throws an error, so I left the conditione

Llaurent ah ok good!

B

BaranOP•5/20/24, 7:14 PM

unrelated to this thread, but did you manage to view the preview or prod database using

drizzle-kit studio

drizzle-kit studio

?

// drizzle.config.ts
import { env } from '@/env';

/*
 * NOTE: Workaround to make drizzle studio work with D1.
 * https://kevinkipp.com/blog/going-full-stack-on-astro-with-cloudflare-d1-and-drizzle/
 * Github discussion: https://github.com/drizzle-team/drizzle-orm/discussions/1545#discussioncomment-8115423
 */
export default env.LOCAL_DB_PATH
  ? { // i can see the local database
      schema: './src/server/db/schema.ts',
      driver: 'd1',
      dialect: 'sqlite',
      dbCredentials: {
        url: env.LOCAL_DB_PATH,
      },
    }
  : { // i can't see the db on d1
      schema: './src/server/db/schema.ts',
      out: './migrations',
      driver: 'd1',
      dbCredentials: {
        wranglerConfigPath:
          new URL('wrangler.toml', import.meta.url).pathname + env.WRANGLER_CONFIG
            ? ` ${env.WRANGLER_CONFIG}`
            : '',
        dbName: env.DB_NAME!,
      },
    };

// drizzle.config.ts
import { env } from '@/env';

/*
 * NOTE: Workaround to make drizzle studio work with D1.
 * https://kevinkipp.com/blog/going-full-stack-on-astro-with-cloudflare-d1-and-drizzle/
 * Github discussion: https://github.com/drizzle-team/drizzle-orm/discussions/1545#discussioncomment-8115423
 */
export default env.LOCAL_DB_PATH
  ? { // i can see the local database
      schema: './src/server/db/schema.ts',
      driver: 'd1',
      dialect: 'sqlite',
      dbCredentials: {
        url: env.LOCAL_DB_PATH,
      },
    }
  : { // i can't see the db on d1
      schema: './src/server/db/schema.ts',
      out: './migrations',
      driver: 'd1',
      dbCredentials: {
        wranglerConfigPath:
          new URL('wrangler.toml', import.meta.url).pathname + env.WRANGLER_CONFIG
            ? ` ${env.WRANGLER_CONFIG}`
            : '',
        dbName: env.DB_NAME!,
      },
    };

// drizzle.config.ts
import { env } from '@/env';

/*
 * NOTE: Workaround to make drizzle studio work with D1.
 * https://kevinkipp.com/blog/going-full-stack-on-astro-with-cloudflare-d1-and-drizzle/
 * Github discussion: https://github.com/drizzle-team/drizzle-orm/discussions/1545#discussioncomment-8115423
 */
export default env.LOCAL_DB_PATH
  ? { // i can see the local database
      schema: './src/server/db/schema.ts',
      driver: 'd1',
      dialect: 'sqlite',
      dbCredentials: {
        url: env.LOCAL_DB_PATH,
      },
    }
  : { // i can't see the db on d1
      schema: './src/server/db/schema.ts',
      out: './migrations',
      driver: 'd1',
      dbCredentials: {
        wranglerConfigPath:
          new URL('wrangler.toml', import.meta.url).pathname + env.WRANGLER_CONFIG
            ? ` ${env.WRANGLER_CONFIG}`
            : '',
        dbName: env.DB_NAME!,
      },
    };

// drizzle.config.ts
import { env } from '@/env';

/*
 * NOTE: Workaround to make drizzle studio work with D1.
 * https://kevinkipp.com/blog/going-full-stack-on-astro-with-cloudflare-d1-and-drizzle/
 * Github discussion: https://github.com/drizzle-team/drizzle-orm/discussions/1545#discussioncomment-8115423
 */
export default env.LOCAL_DB_PATH
  ? { // i can see the local database
      schema: './src/server/db/schema.ts',
      driver: 'd1',
      dialect: 'sqlite',
      dbCredentials: {
        url: env.LOCAL_DB_PATH,
      },
    }
  : { // i can't see the db on d1
      schema: './src/server/db/schema.ts',
      out: './migrations',
      driver: 'd1',
      dbCredentials: {
        wranglerConfigPath:
          new URL('wrangler.toml', import.meta.url).pathname + env.WRANGLER_CONFIG
            ? ` ${env.WRANGLER_CONFIG}`
            : '',
        dbName: env.DB_NAME!,
      },
    };

UPDATE: the issue is fixed with drizzle-kit v0.21.3, THANK YOU!

How can I access `env.DB` in my Pages/Worker on production?

Similar Threads

Similar Threads

Similar Threads