Any idea why I'm getting this error when trying to deploy my nextjs app to Cloudflare via GH action?

KKelsie Hi folks, I have a NextJS application with Supabase that I had deployed on Verce...

J

James•2/7/24, 5:42 PM

i would theorise that the environment variables aren't set for both preview and production in the dashboard, or there was a typo or something

J

James•2/7/24, 5:42 PM

is there some error that you're getting?

Llocalλorse Any idea why I'm getting this error when trying to deploy my nextjs app to Cloud...

J

James•2/7/24, 5:42 PM

try redeploying, looks like a temporary cloudflare api glitch

O

oof2win2•2/7/24, 5:43 PM

how does next-on-pages setupDevBindings work? when i run

next dev

next dev

next dev

next dev the bindings don't seem to exist which is weird as the docs say they should

J

James•2/7/24, 5:44 PM

did you add the latest version of next-on-pages as a dev dependency?

J

James•2/7/24, 5:44 PM

can you share how you're configuring it?

O

oof2win2•2/7/24, 5:44 PM

yes

O

oof2win2•2/7/24, 5:44 PM

import { setupDevBindings } from "@cloudflare/next-on-pages/next-dev";

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/8e93067/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === "development") {
    console.log("created dev bindings");
    await setupDevBindings({
        bindings: {
            DB: {
                type: "d1",
                databaseId: "alm-web-db",
            },
        },
    });
    console.log(process.env.DB);
}
export default nextConfig;

import { setupDevBindings } from "@cloudflare/next-on-pages/next-dev";

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/8e93067/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === "development") {
    console.log("created dev bindings");
    await setupDevBindings({
        bindings: {
            DB: {
                type: "d1",
                databaseId: "alm-web-db",
            },
        },
    });
    console.log(process.env.DB);
}
export default nextConfig;

import { setupDevBindings } from "@cloudflare/next-on-pages/next-dev";

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/8e93067/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === "development") {
    console.log("created dev bindings");
    await setupDevBindings({
        bindings: {
            DB: {
                type: "d1",
                databaseId: "alm-web-db",
            },
        },
    });
    console.log(process.env.DB);
}
export default nextConfig;

import { setupDevBindings } from "@cloudflare/next-on-pages/next-dev";

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/8e93067/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === "development") {
    console.log("created dev bindings");
    await setupDevBindings({
        bindings: {
            DB: {
                type: "d1",
                databaseId: "alm-web-db",
            },
        },
    });
    console.log(process.env.DB);
}
export default nextConfig;

O

oof2win2•2/7/24, 5:44 PM

from the docs just added logs

O

oof2win2•2/7/24, 5:45 PM

on 1.8.6 which is latest

O

oof2win2•2/7/24, 5:46 PM

from the logs i get this which is weird since it should have created the binding

$ next dev
created dev bindings
undefined
created dev bindings
undefined
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

$ next dev
created dev bindings
undefined
created dev bindings
undefined
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

$ next dev
created dev bindings
undefined
created dev bindings
undefined
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

$ next dev
created dev bindings
undefined
created dev bindings
undefined
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000
   - Environments: .env

J

James•2/7/24, 5:46 PM

have you tried using the binding in an edge runtime route?

O

oof2win2•2/7/24, 5:46 PM

yep

O

oof2win2•2/7/24, 5:47 PM

oh my bad, didnt specify runtime = edge

O

oof2win2•2/7/24, 5:48 PM

thank you!

J

James•2/7/24, 5:59 PM

no worries

J

James•2/7/24, 8:27 PM

They should

L

localλorseOP•2/8/24, 1:39 PM

When import this

import consumers from 'stream/consumers'

import consumers from 'stream/consumers'

import consumers from 'stream/consumers'

import consumers from 'stream/consumers', miniflare complains:

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

BUT: This page says that both the

Buffer

Buffer

Buffer

Buffer and

Streams

Streams

Streams

Streams API are supported, and I have set

node_compat = true

node_compat = true

node_compat = true

node_compat = true in my

wrangler.toml

wrangler.toml

.
So why doesn't it work? :)

L

localλorseOP•2/8/24, 1:40 PM

Do I also have to set

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ] in addition to

node_compat = true

node_compat = true

node_compat = true

node_compat = true?

L

localλorseOP•2/8/24, 1:41 PM

Same error if I try

import consumers from 'node:stream/consumers'

import consumers from 'node:stream/consumers'

import consumers from 'node:stream/consumers'

import consumers from 'node:stream/consumers' instead btw

J

James•2/8/24, 6:18 PM

I think this might be a better question for functions or workers-and-pages-help or miniflare

G

gui.ohm•2/8/24, 11:51 PM

Is something like this available with next on pages? https://vercel.com/docs/observability/otel-overview/quickstart
If not, how is it possible to get observability and logs including the response information (next middleware doesn't have response data & status) https://www.answeroverflow.com/m/1125369447599845446
Logpush isn't available either?

Quickstart for using the Vercel OpenTelemetry Collector

Learn how to get started with OTEL on Vercel to send traces from your Serverless or Edge Functions to application performance monitoring (APM) vendors.

How to enable logpush for Pages? - Cloudflare Developers

Since Cloudflare Pages does not support

wrangler.toml

wrangler.toml

config files, how does one enable logpush for Pages?

The only documented way of configuring logpush for workers (https://developers.cloudflare.com/workers/platform/logpush/#enable-logging-on-your-worker) is to either configure the

wrangler.toml

wrangler.toml

file with

logpush = true

logpush = true

logpush = true

logpush = true or to configure...

B

Befus•2/9/24, 4:22 PM

When using revalidatePath to update my cache, it is working locally but not in production. Anybody that is familiar with this?

J

James•2/9/24, 4:36 PM

Do you get any errors?

JJames Do you get any errors?

B

Befus•2/9/24, 6:50 PM

Not really, it just doesn't update

B

Befus•2/9/24, 6:50 PM

Would I have to change settings of cloudflare cache or does it work with the nextjs caching?

J

James•2/9/24, 7:01 PM

it uses the cache api in the worker

J

James•2/9/24, 7:02 PM

this is for a fetch request correct?

B

Befus•2/9/24, 7:02 PM

Not really, I am using server actions to get/put from my kv "directly"

J

James•2/9/24, 7:03 PM

I'm not sure I follow. What are you trying to revalidate with revalidatePath?

B

Befus•2/9/24, 7:04 PM

const Customers: FunctionComponent = async () => {
  const response = await getRequest("CUSTOMERS");

  const customers: Customer[] = await response.json();

  return <CustomerPage customers={customers} />;
};

export async function createCustomer(customer: z.infer<typeof customerSchema>) {
  try {
    // Send request to KV to create customer
    const id = uuidv4();

    // Cleanup data by removing empty objects or arrays or strings
    customer = removeEmptyData(customer);

    // add id to object
    customer.id = id;

    await putRequest("CUSTOMERS", "id:" + id, customer);

    // Return success message
    return {
      message: "Customer created",
      description: `"${customer.firstName} ${customer.name}" has been created successfully`,
      success: true,
      data: customer,
    };
  } catch (error) {
    return {
      message: "Error creating customer",
      description: `"${customer.firstName} ${customer.name}" could not be created`,
      success: false,
    };
  } finally {
    // Revalidate cache
    revalidatePath("/customers");
  }
}

const Customers: FunctionComponent = async () => {
  const response = await getRequest("CUSTOMERS");

  const customers: Customer[] = await response.json();

  return <CustomerPage customers={customers} />;
};

export async function createCustomer(customer: z.infer<typeof customerSchema>) {
  try {
    // Send request to KV to create customer
    const id = uuidv4();

    // Cleanup data by removing empty objects or arrays or strings
    customer = removeEmptyData(customer);

    // add id to object
    customer.id = id;

    await putRequest("CUSTOMERS", "id:" + id, customer);

    // Return success message
    return {
      message: "Customer created",
      description: `"${customer.firstName} ${customer.name}" has been created successfully`,
      success: true,
      data: customer,
    };
  } catch (error) {
    return {
      message: "Error creating customer",
      description: `"${customer.firstName} ${customer.name}" could not be created`,
      success: false,
    };
  } finally {
    // Revalidate cache
    revalidatePath("/customers");
  }
}

const Customers: FunctionComponent = async () => {
  const response = await getRequest("CUSTOMERS");

  const customers: Customer[] = await response.json();

  return <CustomerPage customers={customers} />;
};

export async function createCustomer(customer: z.infer<typeof customerSchema>) {
  try {
    // Send request to KV to create customer
    const id = uuidv4();

    // Cleanup data by removing empty objects or arrays or strings
    customer = removeEmptyData(customer);

    // add id to object
    customer.id = id;

    await putRequest("CUSTOMERS", "id:" + id, customer);

    // Return success message
    return {
      message: "Customer created",
      description: `"${customer.firstName} ${customer.name}" has been created successfully`,
      success: true,
      data: customer,
    };
  } catch (error) {
    return {
      message: "Error creating customer",
      description: `"${customer.firstName} ${customer.name}" could not be created`,
      success: false,
    };
  } finally {
    // Revalidate cache
    revalidatePath("/customers");
  }
}

const Customers: FunctionComponent = async () => {
  const response = await getRequest("CUSTOMERS");

  const customers: Customer[] = await response.json();

  return <CustomerPage customers={customers} />;
};

export async function createCustomer(customer: z.infer<typeof customerSchema>) {
  try {
    // Send request to KV to create customer
    const id = uuidv4();

    // Cleanup data by removing empty objects or arrays or strings
    customer = removeEmptyData(customer);

    // add id to object
    customer.id = id;

    await putRequest("CUSTOMERS", "id:" + id, customer);

    // Return success message
    return {
      message: "Customer created",
      description: `"${customer.firstName} ${customer.name}" has been created successfully`,
      success: true,
      data: customer,
    };
  } catch (error) {
    return {
      message: "Error creating customer",
      description: `"${customer.firstName} ${customer.name}" could not be created`,
      success: false,
    };
  } finally {
    // Revalidate cache
    revalidatePath("/customers");
  }
}

B

Befus•2/9/24, 7:04 PM

This may make it more clear, when creating or updating I would like it to "live" update for the user, I thought revalidatePath would do that

B

Befus•2/9/24, 7:05 PM

In the front end of the createCustomer you get redirected back to the customers page so I would assume the getRequests gets triggered again

J

James•2/9/24, 7:08 PM

I'm not sure I understand what is supposed to be cached that you're trying to revalidate here

B

Befus•2/9/24, 7:21 PM

I would think the customers that I am getting would get cached and then when I add one to the kv, it redirects again so the getRequest goes off.
Now that I am typing it, it seems that I am using it wrong or something

B

Befus•2/9/24, 7:22 PM

I was thinking that I could use the cache for live updates instead of having a useState

B

Befus•2/9/24, 7:24 PM

Do you have any suggestions since I feel like I am doing this wrong

J

Jeff•2/10/24, 7:05 PM

Hello - I'm experiencing segfaults using next-on-pages, it seems to happen right when it starts the vercel part. Build ID:

da4ccfcb-0266-4456-a60d-d43e94c95880

da4ccfcb-0266-4456-a60d-d43e94c95880

da4ccfcb-0266-4456-a60d-d43e94c95880

da4ccfcb-0266-4456-a60d-d43e94c95880

J

Jeff•2/10/24, 7:05 PM

I've tried both

experimental.cpus=2

experimental.cpus=2

experimental.cpus=2

experimental.cpus=2 and

NODE_OPTIONS=--max-old-space-size=8192

NODE_OPTIONS=--max-old-space-size=8192

NODE_OPTIONS=--max-old-space-size=8192

NODE_OPTIONS=--max-old-space-size=8192. Builds locally

J

James•2/10/24, 9:34 PM

Probably a memory leak in Next.js I would guess, have heard of several people running into that kind of situation before :/

BBefus Do you have any suggestions since I feel like I am doing this wrong

J

James•2/10/24, 9:35 PM

I mean, I'm still not sure I really understand what is supposed to be cached? revalidatePath is generally used to revalidate fetch cache entries afaik

B

Befus•2/10/24, 9:43 PM

I would think that when in this case I get my customers from the kv that would be cached? But when logging it I got this

B

Befus•2/10/24, 9:43 PM

JJames I mean, I'm still not sure I really understand what is supposed to be cached? re...

B

Befus•2/10/24, 9:44 PM

https://nextjs.org/docs/app/building-your-application/caching#react-cache-function

Building Your Application: Caching | Next.js

An overview of caching mechanisms in Next.js.