7 replies

fetch failed with app directory

Hey guys, I'm kind of stuck with drizzle at my first try using the app directory.

I have defined the following db query in my page.tsx:

export default async function Home() {
  const dbSubjects = await db.select().from(subjects);

  return (
    <>
      {dbSubjects.length}
    </>
  );
}

export default async function Home() {
  const dbSubjects = await db.select().from(subjects);

  return (
    <>
      {dbSubjects.length}
    </>
  );
}

But somehow I always get the error

- error TypeError: fetch failed

- error TypeError: fetch failed

Full stack trace:

react-server-dom-webpack-client.browser.development.js:1010 Uncaught TypeError: fetch failed
    at Object.fetch (C:\Dev\sempla\node_modules\next\dist\compiled\undici\index.js:1:26669)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

react-server-dom-webpack-client.browser.development.js:1010 Uncaught TypeError: fetch failed
    at Object.fetch (C:\Dev\sempla\node_modules\next\dist\compiled\undici\index.js:1:26669)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Node version:

v16.13.0

v16.13.0

NextJS:

13.4.7

13.4.7

Solution

Yes!

I found the issue. It was, that somehow the creator of my repository, that I used as template, used

@planetscale/database

@planetscale/database

, but I was not using planetscale for my dev environment and so it did not work. This now also makes sense with the port 443, which was actually the tried connection to the database url (which was 127.0.0.1 at this moment) and so it did not find any database, because there was none. Now I've changed to drizzle-orm/mysql2 and I will use

@planetscale/database

@planetscale/database

in production

Jump to solution

TTC

Theo's Typesafe Cult•3y ago•

7 replies

Meierschlumpf

fetch failed with app directory

Hey guys, I'm kind of stuck with drizzle at my first try using the app directory.

I have defined the following db query in my page.tsx:

export default async function Home() {
  const dbSubjects = await db.select().from(subjects);

  return (
    <>
      {dbSubjects.length}
    </>
  );
}

export default async function Home() {
  const dbSubjects = await db.select().from(subjects);

  return (
    <>
      {dbSubjects.length}
    </>
  );
}

But somehow I always get the error

- error TypeError: fetch failed

- error TypeError: fetch failed

Full stack trace:

react-server-dom-webpack-client.browser.development.js:1010 Uncaught TypeError: fetch failed
    at Object.fetch (C:\Dev\sempla\node_modules\next\dist\compiled\undici\index.js:1:26669)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

react-server-dom-webpack-client.browser.development.js:1010 Uncaught TypeError: fetch failed
    at Object.fetch (C:\Dev\sempla\node_modules\next\dist\compiled\undici\index.js:1:26669)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Node version:

v16.13.0

v16.13.0

NextJS:

13.4.7

13.4.7

Solution

Yes!

I found the issue. It was, that somehow the creator of my repository, that I used as template, used

@planetscale/database

@planetscale/database

@planetscale/database

@planetscale/database

in production

Jump to solution

fetch failed with app directory

Similar Threads

fetch failed with app directory

Similar Threads

Similar Threads

Similar Threads