Cloudflare Developers•4mo ago

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

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'
}

[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.

GitHub

GitHub - cjxe/nextjs-d1-drizzle-cloudflare-pages

Contribute to cjxe/nextjs-d1-drizzle-cloudflare-pages development by creating an account on GitHub.

29 Replies

laurent•4mo ago

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();

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"

lettucebaran•4mo ago

Thanks for the reply! I made your suggested changes, and the terminal threw this error: TypeError: Cannot read properties of undefined (reading 'prepare') 😵‍💫

laurent•4mo ago

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

lettucebaran•4mo ago

- 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 i can do a 5 minute demo on screen share if you have some time

laurent•4mo ago

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 });
}

lettucebaran•4mo ago

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

laurent•4mo ago

to test the api route you use something like postman and call GET localhost:3000/api/something I use thunder client in vscode

lettucebaran•4mo ago

lettucebaran•4mo ago

i am getting the same error both thunder client and my browser returned the same

laurent•4mo ago

are you exporting the db object as I showed you?

lettucebaran•4mo ago

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

lettucebaran•4mo ago

laurent•4mo ago

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

lettucebaran•4mo ago

i am shaking

[[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"

thank you very much

laurent•4mo ago

do you see a database there?

Gaming

Programming

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