Nuxt3 page local development issue

I am developing a nuxt3 app. I deploy it using pages. It works fine on cloud, but I want to develope some functionalities locally. I have an endpoint like this:

import { D1Database } from "@cloudflare/workers-types";

export default defineEventHandler(async ({ context }) => {
  const db: D1Database = context.cloudflare.env.galleryDb;

  const stmt = db.prepare("SELECT * FROM photos WHERE tag= ?").bind("memes");
  const { results } = await stmt.all();
  return {
    results,
  };
});

import { D1Database } from "@cloudflare/workers-types";

export default defineEventHandler(async ({ context }) => {
  const db: D1Database = context.cloudflare.env.galleryDb;

  const stmt = db.prepare("SELECT * FROM photos WHERE tag= ?").bind("memes");
  const { results } = await stmt.all();
  return {
    results,
  };
});

However, when running

npx wrangler pages dev --d1=galleryDb --r2=storage --compatibility-flag=nodejs_compat  -- npm run dev

npx wrangler pages dev --d1=galleryDb --r2=storage --compatibility-flag=nodejs_compat  -- npm run dev

I get the following response from the endpoint:

{"url":"/api/photos","statusCode":500,"statusMessage":"","message":"Cannot read properties of undefined (reading 'env')","stack":"<pre><span class=\"stack\">at <anonymous> (./server/api/photos.get.ts:5:1)</span>\n<span class=\"stack internal\">at ./node_modules/h3/dist/index.mjs:1563:14</span>\n<span class=\"stack internal\">at Object.handler (./node_modules/h3/dist/index.mjs:1806:28)</span>\n<span class=\"stack internal\">at Object.handler (./node_modules/h3/dist/index.mjs:1630:31)</span>\n<span class=\"stack internal\">at process.processTicksAndRejections (node:internal/process/task_queues:95:5)</span>\n<span class=\"stack internal\">at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)</span></pre>"}

{"url":"/api/photos","statusCode":500,"statusMessage":"","message":"Cannot read properties of undefined (reading 'env')","stack":"<pre><span class=\"stack\">at <anonymous> (./server/api/photos.get.ts:5:1)</span>\n<span class=\"stack internal\">at ./node_modules/h3/dist/index.mjs:1563:14</span>\n<span class=\"stack internal\">at Object.handler (./node_modules/h3/dist/index.mjs:1806:28)</span>\n<span class=\"stack internal\">at Object.handler (./node_modules/h3/dist/index.mjs:1630:31)</span>\n<span class=\"stack internal\">at process.processTicksAndRejections (node:internal/process/task_queues:95:5)</span>\n<span class=\"stack internal\">at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)</span></pre>"}

How can I correctly setup a local dev envoronment?
I also want to use r2 locally.

Nuxt3 page local development issue

I am developing a nuxt3 app. I deploy it using pages. It works fine on cloud, but I want to develope some functionalities locally. I have an endpoint like this:

import { D1Database } from "@cloudflare/workers-types";

export default defineEventHandler(async ({ context }) => {
  const db: D1Database = context.cloudflare.env.galleryDb;

  const stmt = db.prepare("SELECT * FROM photos WHERE tag= ?").bind("memes");
  const { results } = await stmt.all();
  return {
    results,
  };
});

import { D1Database } from "@cloudflare/workers-types";

export default defineEventHandler(async ({ context }) => {
  const db: D1Database = context.cloudflare.env.galleryDb;

  const stmt = db.prepare("SELECT * FROM photos WHERE tag= ?").bind("memes");
  const { results } = await stmt.all();
  return {
    results,
  };
});

However, when running

npx wrangler pages dev --d1=galleryDb --r2=storage --compatibility-flag=nodejs_compat  -- npm run dev

npx wrangler pages dev --d1=galleryDb --r2=storage --compatibility-flag=nodejs_compat  -- npm run dev

I get the following response from the endpoint:

{"url":"/api/photos","statusCode":500,"statusMessage":"","message":"Cannot read properties of undefined (reading 'env')","stack":"<pre><span class=\"stack\">at <anonymous> (./server/api/photos.get.ts:5:1)</span>\n<span class=\"stack internal\">at ./node_modules/h3/dist/index.mjs:1563:14</span>\n<span class=\"stack internal\">at Object.handler (./node_modules/h3/dist/index.mjs:1806:28)</span>\n<span class=\"stack internal\">at Object.handler (./node_modules/h3/dist/index.mjs:1630:31)</span>\n<span class=\"stack internal\">at process.processTicksAndRejections (node:internal/process/task_queues:95:5)</span>\n<span class=\"stack internal\">at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)</span></pre>"}

{"url":"/api/photos","statusCode":500,"statusMessage":"","message":"Cannot read properties of undefined (reading 'env')","stack":"<pre><span class=\"stack\">at <anonymous> (./server/api/photos.get.ts:5:1)</span>\n<span class=\"stack internal\">at ./node_modules/h3/dist/index.mjs:1563:14</span>\n<span class=\"stack internal\">at Object.handler (./node_modules/h3/dist/index.mjs:1806:28)</span>\n<span class=\"stack internal\">at Object.handler (./node_modules/h3/dist/index.mjs:1630:31)</span>\n<span class=\"stack internal\">at process.processTicksAndRejections (node:internal/process/task_queues:95:5)</span>\n<span class=\"stack internal\">at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)</span></pre>"}

How can I correctly setup a local dev envoronment?
I also want to use r2 locally.

Nuxt3 page local development issue

Similar Threads

Nuxt3 page local development issue

Similar Threads

Similar Threads

Similar Threads