Hello everyone, I have a problem uploading my nextjs application in cloudflare using the build comm

NNoWay Hello everyone, I have a problem uploading my nextjs application in cloudflare ...

N

Nob•5/15/24, 3:15 PM

you need to put

export const runtime = "edge";

export const runtime = "edge";

in your page.tsx file and

"use server"

"use server"

is for server actions so I think you need to separate that into a different file

N

NoWayOP•5/15/24, 3:17 PM

export const

runtime = "edge";

runtime = "edge";

do i have to put this in every page.tsx / route.ts / layout.tsx ?

NNob you need to put ``export const runtime = "edge";`` in your page.tsx file and ``"...

N

NoWayOP•5/15/24, 3:17 PM

.

NNoWay export const ```runtime = "edge";``` do i have to put this in every page.tsx / ...

N

Nob•5/15/24, 3:21 PM

every page.tsx / route.ts that are not static (that use headers, cookies etc)

N

Nob•5/15/24, 3:21 PM

but you don't need for your server action

MMetalGear What features am I losing moving my next 14 web app from vercel to cloudflare

L

laurent•5/16/24, 8:40 AM

Vercel image optimization, log drains for log retention, sentry integration

B

Baran•5/16/24, 2:56 PM

I have a Nextjs v14 app on my local machine. I added

wrangler.toml

wrangler.toml

.

name = "<TBC>"
compatibility_flags = [ "nodejs_compat" ]
pages_build_output_dir = ".vercel/output/static"

name = "<TBC>"
compatibility_flags = [ "nodejs_compat" ]
pages_build_output_dir = ".vercel/output/static"

name = "<TBC>"
compatibility_flags = [ "nodejs_compat" ]
pages_build_output_dir = ".vercel/output/static"

name = "<TBC>"
compatibility_flags = [ "nodejs_compat" ]
pages_build_output_dir = ".vercel/output/static"

When I build and deploy the app using wrangler on my local machine, it picks up the flag and I don't get any node js compatability errors; but the cloud instance didn't pick it up (see attached image). I can manually add this flag using the Cloudflare dashboard, but I would prefer to automate the process in

wrangler.toml

wrangler.toml

. Did anyone manage to fix this problem?

FIXED: I had to add

compatibility_date = "2024-05-13"

compatibility_date = "2024-05-13"

compatibility_date = "2024-05-13"

compatibility_date = "2024-05-13" to

wrangler.toml

wrangler.toml

.

TThomas So, everything is working perfectly fine so far. No issues with next caching to...

J

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

the only reason it's shelved is because we dont have tests for testing the fetch cache works properly which would validate that this doesn't interfere with it, and i haven't had time to write any yet or test this myself since i basically married my job

J

James•5/16/24, 8:00 PM

not sure regarding react

S

Sej•5/16/24, 8:01 PM

Hi, I'm working on a project that uses the pages router but it fails on the Cloudflare Pages build.

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /posts/[slug]
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /posts/[slug]
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /posts/[slug]
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /posts/[slug]
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';

I export

runtime = 'experimental-edge

runtime = 'experimental-edge

runtime = 'experimental-edge

runtime = 'experimental-edge on my custom

_app

_app

_app

_app but not on the page.tsx itself because I run into missing packages that's related to Firebase Auth. Exporting

runtime = 'edge'

runtime = 'edge'

runtime = 'edge'

runtime = 'edge' also doesn't work. Everything works as intended on local development but it breaks on build. Is there anything else I should try?

M

Mick•5/17/24, 9:36 AM

Make sure that page.tsx for /posts/[slug] has the export const runtime = ‘edge’

N

neoney•5/17/24, 1:34 PM

added some asynclocalstorage stuff to my nextjs app, and it gets bundled into the frontend code???

L

lil.bighead•5/17/24, 3:48 PM

Hey folks, I'm having issues caching fetch requests within Server Components when we deploy to CF Pages. The Next docs mention time-based revalidation, e. g.

const users = await fetch(USERS_URL, { next: { revalidate: 60 } }).then(…)

const users = await fetch(USERS_URL, { next: { revalidate: 60 } }).then(…)

const users = await fetch(USERS_URL, { next: { revalidate: 60 } }).then(…)

const users = await fetch(USERS_URL, { next: { revalidate: 60 } }).then(…)
This works as expected in dev - the server will only re-fetch 60 seconds after the last fetch occurred. Once we deploy though, each request to the page makes a fetch every time.
Is this where the KV bindings come into play? I don't believe my team set that up.

R

Rohit Verma•5/18/24, 10:45 AM

hi team, for better reach reposting an open question here Worker using multiple modules in a single bundle

Basically seeing warnings as ✘ [ERROR] workerd/jsg/_virtual_includes/jsg/workerd/jsg/modules.h:443: warning: NOSENTRY Worker using multiple modules in a single bundle.

Llil.bighead Hey folks, I'm having issues caching fetch requests within Server Components whe...

J

James•5/19/24, 8:13 PM

can you open an issue on the next-on-pages github repo please

Nneoney added some asynclocalstorage stuff to my nextjs app, and it gets bundled into th...

J

James•5/19/24, 8:13 PM

are you using it only in server components? it'll be how nextjs builds your app so im not sure we can do anything about that

L

lil.bighead•5/19/24, 8:38 PM

Hey @James thanks for getting back to me. I tested deploying a hello world next-on-pages project to see if the same issue occurred and it didn't! The caching works great. So it is definitely something wrong with my company's project setup. One thing I noticed is that we don't have a wrangler.toml -though it's unclear to me how we're deploying without it. Thanks again!

J

James•5/19/24, 8:39 PM

i see. that's interesting. you shouldnt need a wrangler.toml for fetch caching to work though...

L

lil.bighead•5/19/24, 8:41 PM

O rly. I'll have a look and report back once they grant me access to the account, probably tomorrow

JJames are you using it only in server components? it'll be how nextjs builds your app ...

N

neoney•5/19/24, 8:53 PM

the issue was a bit different

N

neoney•5/19/24, 9:32 PM

well

N

neoney•5/19/24, 9:32 PM

the code for it was called

N

neoney•5/19/24, 9:32 PM

because

N

neoney•5/19/24, 9:32 PM

i was importing a package

N

neoney•5/19/24, 9:32 PM

that was importing it somewhere deep

N

neoney•5/19/24, 9:32 PM

i just refactored the pkg

N

neoney•5/19/24, 9:32 PM

so i only import the files i actually need

J

James•5/19/24, 10:33 PM

ah makes sense

Llaurent -> Just throwing it out there, my honest feedback on my cloudlare experience. I...

B

Baran•5/20/24, 1:57 PM

hi, how did you solve calling D1 binding? I get an error.

Short explanation including minimum code to reproduce the error: How can I access `env.DB` in my Pages/Worker on production?

A

ard•5/20/24, 3:06 PM

I am getting the error

The script will never generate a response

The script will never generate a response

The script will never generate a response

The script will never generate a response when trying to use fetch() in my generateMetaData function in NextJS 14. I've seen a lot of similar bugs reported on this but haven't been able to find a solution. Is anyone familiar with this?
I can reproduce this locally when running npx @Cloudflare/next-on-pages@1 and then using wrangler to do a preview, otherwise this works on local.
The error I was getting before reproducing on local (in my dev cloudflare url) was

A hanging Promise was canceled. This happens when the worker runtime is waiting for a Promise from JavaScript to resolve, but has detected that the Promise cannot possibly ever resolve because all code and events related to the Promise's I/O context have already finished.

A hanging Promise was canceled. This happens when the worker runtime is waiting for a Promise from JavaScript to resolve, but has detected that the Promise cannot possibly ever resolve because all code and events related to the Promise's I/O context have already finished.

A hanging Promise was canceled. This happens when the worker runtime is waiting for a Promise from JavaScript to resolve, but has detected that the Promise cannot possibly ever resolve because all code and events related to the Promise's I/O context have already finished.

A hanging Promise was canceled. This happens when the worker runtime is waiting for a Promise from JavaScript to resolve, but has detected that the Promise cannot possibly ever resolve because all code and events related to the Promise's I/O context have already finished.

SSM Did disabling "smart placement" fix the internal server error for you? I ask as ...

N

Nob•5/20/24, 8:16 PM

Hey, it seem like I have this problem again, after deploying it seem that the website load infinitely

N

Nob•5/20/24, 8:17 PM

maybe a cache problem because after some minutes after deployment the app works normally

N

Nob•5/20/24, 8:17 PM

or if I use a different browser it works

H

Hollo•5/21/24, 1:03 PM

can I somehow see the logs of a running deployment?

HHollo can I somehow see the logs of a running deployment?

I

Ian•5/21/24, 1:17 PM

You can tail them with Wrangler, or tail them in the web UI (Deployments > View Details (on your production deployment) > Functions > Begin Log Stream.

I

Ian•5/21/24, 1:17 PM

Note that in both cases you won't see prior logs, only things that happen after you start tailing.

H

Hollo•5/21/24, 1:18 PM

Thank you ill try that, since I have an issue that doesn't happen in the local preview and only on cloudflare.

Oosa I'm trying to get cache headers working for images loaded with custom loader whi...

T

thipperz•5/21/24, 8:03 PM

I'm facing this same issue: where should I put the

_headers

_headers

file so I don't need to manually edit

./.vercel/output/static/_headers

./.vercel/output/static/_headers

./.vercel/output/static/_headers

./.vercel/output/static/_headers after every build?

B

bun•5/22/24, 12:48 AM

i've been encountering some weird issue, has anyone else had anything similar?

whenever im refreshing like multiple times repeatedly, somewere between 5th or 10th refresh results in a 500 internal server error and the logs say:

  (error) TypeError: Cannot read properties of null (reading 'useContext')
  (error) TypeError: Cannot read properties of null (reading 'useContext')
  (error)  ⨯ TypeError: Cannot read properties of null (reading 'useContext')
  (error)  ⨯ TypeError: Cannot read properties of null (reading 'default')

  (error) TypeError: Cannot read properties of null (reading 'useContext')
  (error) TypeError: Cannot read properties of null (reading 'useContext')
  (error)  ⨯ TypeError: Cannot read properties of null (reading 'useContext')
  (error)  ⨯ TypeError: Cannot read properties of null (reading 'default')

  (error) TypeError: Cannot read properties of null (reading 'useContext')
  (error) TypeError: Cannot read properties of null (reading 'useContext')
  (error)  ⨯ TypeError: Cannot read properties of null (reading 'useContext')
  (error)  ⨯ TypeError: Cannot read properties of null (reading 'default')

  (error) TypeError: Cannot read properties of null (reading 'useContext')
  (error) TypeError: Cannot read properties of null (reading 'useContext')
  (error)  ⨯ TypeError: Cannot read properties of null (reading 'useContext')
  (error)  ⨯ TypeError: Cannot read properties of null (reading 'default')