Locally the build works perfectly fine, but not when (auto) building inside Cloudflare

JJames I’m afraid i haven’t actually looked at v15 yet, so unsure of the differences in...

R in Tokyo•12/9/24, 4:21 AM

Thanks for the follow up, a brief look at the GitHub issue I created documents what changed in v15 and the error.

https://github.com/cloudflare/next-on-pages/issues/913

Basically there is no cache for now with v15, since opting in, will cause the error.

GitHub

[⚡ Feature]: Add Next 15.0.3 Fetch cache support. · Issue #913 · c...

Description previously, cache was on by default. let posts:any = await fetch('https://domain.com/posts').then((res) => res.json()) Updated method to opt-in for cache as per NEXTjs's ...

R in Tokyo•12/9/24, 5:50 AM

Figured it out! It’s an experimental work around. I can add to that issue one it’s picked up by the team!

SSam Locally the build works perfectly fine, but not when (auto) building inside Clou...

num•12/9/24, 7:17 AM

https://github.com/cloudflare/next-on-pages/issues/914#issuecomment-2525247658 check if you're also using the incorrect pnpm/package manager version

Nneoney Hi, I'm trying to use a package that imports `node:async_hooks` inside of the cu...

James•12/9/24, 7:33 AM

This error should be fixed in the latest release I believe, but it looks like npm failed to publish it so i'll ping dario to rerun

Nnum https://github.com/cloudflare/next-on-pages/issues/914#issuecomment-2525247658 c...

SamOP•12/9/24, 11:29 AM

Great, that's it yeah. Thanks

num•12/9/24, 11:31 AM

would it maybe be possible to make the install step more strict? I also never thought about the case where my package manager wasn't using the correct version as it's not something we specify in the worker settings or elsewhere.
Imo with that being so relaxed it's a foot-gun waiting to go off

Clément•12/9/24, 1:25 PM

Hello, I cannot retrieve my

env variable

env variable

when my project is build on cloud flare.

process.env.MY_VARIABLE

process.env.MY_VARIABLE

is unable to work.  I tried to push my variables via

wrangler

wrangler

, via the dashboard, everything. Do you have an idea ?

Clément•12/9/24, 4:21 PM

It is on a server-action

neoney•12/9/24, 6:42 PM

does instrumentation hook work on next-on-pages?

neoney•12/9/24, 7:19 PM

it doesn't seem to work in a prod build for me

neoney•12/9/24, 7:19 PM

yes in dev, not in prod

Rabid•12/9/24, 10:16 PM

How can I have fetch requests executed inside of getServerSideProps be cached? I"m currently doing something like this:

const wpURL = `${process.env.NEXT_PUBLIC_WP_API}/wp-json/wp/v2/${type}?page=${page}`
  let wpReq = new Request(wpURL, {
    method: 'GET',
    cf: {
      cacheTtl: WP_CACHE_TIME,
      cacheEverything: true,
    },
  })

  const wpResp = await fetch(wpReq)
  if (!wpResp.ok) {
    console.error('failed to fetch wp content', wpResp.status)
    return {}
  }

  const wpRes = await wpResp.json()

  wpResp.headers.forEach((value, name) => {
    console.log(`header ${name}: ${value}`)
  })

const wpURL = `${process.env.NEXT_PUBLIC_WP_API}/wp-json/wp/v2/${type}?page=${page}`
  let wpReq = new Request(wpURL, {
    method: 'GET',
    cf: {
      cacheTtl: WP_CACHE_TIME,
      cacheEverything: true,
    },
  })

  const wpResp = await fetch(wpReq)
  if (!wpResp.ok) {
    console.error('failed to fetch wp content', wpResp.status)
    return {}
  }

  const wpRes = await wpResp.json()

  wpResp.headers.forEach((value, name) => {
    console.log(`header ${name}: ${value}`)
  })

And yet when I'm printing out my headers, it looks like this:

  (log) header x-cache: BYPASS
  (log) header x-content-type-options: nosniff
  (log) header x-robots-tag: noindex
  (log) header x-server: sparta-front-01
  (log) header x-skip-cache: 1
  (log) header x-wp-total: 138
  (log) header x-wp-totalpages: 14

  (log) header x-cache: BYPASS
  (log) header x-content-type-options: nosniff
  (log) header x-robots-tag: noindex
  (log) header x-server: sparta-front-01
  (log) header x-skip-cache: 1
  (log) header x-wp-total: 138
  (log) header x-wp-totalpages: 14

KenKiyosaki•12/10/24, 2:39 PM

How do I fix XMLHttpRequest is undefined?

ThànhNĐ•12/10/24, 3:00 PM

hello all, i'm currently getting a 522 error on my VPS, but only with a few carriers, can anyone explain it for me

Clément•12/10/24, 11:48 PM

@Babacar I already tried

Clément•12/10/24, 11:48 PM

But next still doesn’t find my env

BBabacar Weird—are you trying to access the environment variable from a client-side compo...

Clément•12/10/24, 11:56 PM

Within a server action

Clément•12/10/24, 11:57 PM

It’s weird, in local it’s ok but in production it doesn’t work.
I tried with command and manually. Maybe my project is not well configured but i see nothing. My bindings works but not additionals vars

BBabacar <:NotLikeThis:946950222783840256> make sure the variables are set in the preview...

Clément•12/11/24, 12:12 AM

It’s things that I have tested too ahah. But thank’s for the help

CClément It’s things that I have tested too ahah. But thank’s for the help

juanferreras•12/11/24, 11:38 AM

is the variable plain text or secret? if it's plain text, if you convert it to secret and re-deploy, does it work?

Jjuanferreras is the variable plain text or secret? if it's plain text, if you convert it to s...

Clément•12/11/24, 12:00 PM

It’s in secret

giancarlo•12/11/24, 4:04 PM

Hi all, my Server Actions are hitting the error

This ReadableStream is disturbed (has already been read from), and cannot be used as a body.

This ReadableStream is disturbed (has already been read from), and cannot be used as a body.

. Wonder if anybody else is seeing this?

giancarlo•12/11/24, 4:13 PM

I'd understand why this would/could happen in a Route Handler where we have access to

Request

Request

, but in a Server Action we simply receive the payload

James•12/11/24, 7:07 PM

Sounds like a potential bug

Mick•12/12/24, 1:19 AM

Hey what are some good solutions to reducing the bundle size? I've got maybe a small to medium sized dashboard in NextJS and we just hit the 25mb limit and now we are pretty stuck. Support didn't really help or tell me anything obvious.

I'm pretty stuck right now, it's rights on the limit. I'd easily pay the Pro plan price if that doubled or 4x that limit. I don't know what else I can do in the next config file to reduce imports, I've tried heaps with transpile and optimizePackageImports: [] to not avail

Screenshot_2024-12-12_at_11.16.22_AM.png

Screenshot_2024-12-12_at_11.17.46_AM.png

Saurav Panda•12/12/24, 6:03 AM

Would love help with same on how we can build and upload the files to cloudflare?

MMick Hey what are some good solutions to reducing the bundle size? I've got maybe a s...

Pierre•12/12/24, 6:32 AM

I guess they are referring to their docs but not really helpful, yeah https://developers.cloudflare.com/pages/platform/limits/#file-size

MMick Hey what are some good solutions to reducing the bundle size? I've got maybe a s...

num•12/12/24, 7:14 AM

depends really on what kind of data you're bundling. Do you have more insights on what your app does and what the big sized stuff is?

MMick Hey what are some good solutions to reducing the bundle size? I've got maybe a s...

DarkDeviL•12/12/24, 7:16 AM

Is this being caused alone by the "/webpack/
/webpack/
" directory?

A similar conversation conversation was made around general-discussions which happened just about 2 hours before your message here, it sounds like you shouldn't be uploading the contents from "/webpack/
/webpack/
", as that isn't something your visitors will be using at all.

Do you have a "dist/
dist/
" or "build/
build/
" directory?

cj•12/12/24, 9:31 AM

Will react cache work on next-on-pages?

It is a server side function to cache results. Used in react server components.

cache – React

The library for web and native user interfaces

cakeee•12/12/24, 11:15 AM

my nextjs app works fine when running locally and on preview as well but when deployed it only shows "application error happened on client side" and theres nothing in console either

How do i debug this?

Mmakisuo ```tsx 00:08:56.974 Detected the following tools from environment: bun@1.1.4,...

Tenshi•12/14/24, 4:43 PM

did u manage to make this work? im trying to make a next on pages project with bun on a workspace, but it keeps using npm i

TTenshi did u manage to make this work? im trying to make a next on pages project with b...

makisuo•12/14/24, 6:55 PM

Set bun as your package manager in your package.json and add bun install to your build step

Mmakisuo Set bun as your package manager in your package.json and add bun install to your...

Tenshi•12/15/24, 2:49 AM

oh ok. thanks for replying

MMick Hey what are some good solutions to reducing the bundle size? I've got maybe a s...

James•12/16/24, 9:03 AM

Barrel files are normally a big offender

ejcx•12/17/24, 5:15 PM

Hi, random question, is

__NEXT_INCREMENTAL_CACHE_IPC_KEY

__NEXT_INCREMENTAL_CACHE_IPC_KEY

sensitive? It says "key" and looks random so I imagine it could be... but I'm not sure what it would be for. I don't see it documented anywhere but I see it in

process.env

process.env

Eejcx Hi, random question, is `__NEXT_INCREMENTAL_CACHE_IPC_KEY` sensitive? It says "k...

ejcx•12/17/24, 7:39 PM

Actually, I assumed this was a Cloudflare Pages thing, but there's nothing indicating it is. It's probably just an internal next thing, so I'm asking in the wrong place.

Paul•12/18/24, 3:51 AM

Using Nextjs and defining route endpoints, I realized all these route endpoints need to be using the edge runtime. I can't seem to use the nodejs runtime like with workers when using next-on-pages. Is this correct? Can someone confirm? It seems like I need to separate my frontend and backend so next-on-pages mainly loads the nextjs frontend app and server actions whereas my backend needs to be written in my case in honojs and as a cloudflare worker deployment OUTSIDE of nextjs route endpoints (otherwise next-on-pages will try to build the route endpoints on pages and it'll require edge runtime). Is that correct?

Paul•12/18/24, 3:52 AM

tldr; cloudflare next-on-pages 100% needs edge runtime. There is no way to put nextjs route endpoints on cloudflare workers using nodejs runtime when using next-on-pages right?

James•12/18/24, 11:52 AM

Correct, next-on-pages only works with either prerendered routes or edge-runtime routes

Rabid•12/19/24, 9:13 PM

Anyone have a good way to make my preview deployments use a different .env file? So .env.production for production and .env.staging or .env.preview for preview?

Victor Berchet•12/20/24, 4:09 PM

We have just released @opennextjs/cloudflare 0.3.0

Thanks to everybody who made that possible, from cloudflare and the community.
Kudos to @Dario @petebd @conico974 @James and everybody that submitted PRs and reported feeback

The docs have been updated for the released at https://opennext.js.org/cloudflare, including a migration guide from 0.2.
0.3 supports middleware, loading .env* files, ... It includes quite a few bug fixes and improvements.
Please test this new release and report feedback!

Happy holiday season

Check the Open Next discord for more info about Next on Workers https://discord.gg/opennextjs

Index - OpenNext

Open-source Next.js adapters

NZX•12/23/24, 8:06 PM

Hello, i am looking for help,

I am making a website builder, and I made a "publish" button that deploys the users website into cloudflare but I am having issues.

Basically when I press Publish, I have a big function that turns my node tree of the builder into a next js project (creates component, creates app folder, src etc..), then I need it to automatically deploy that project to a new Pages or Worker. How can i proceed ? Thank you!

NZX•12/23/24, 8:39 PM

I have succeeded with wrangler, but I found that I can only upload a next project to a Pages is that true ? I cannot do it onto a Worker ?

NNZX I have succeeded with wrangler, but I found that I can only upload a next projec...

dapperdandev•12/24/24, 7:50 PM

I successfully uploaded an AngularJS (yes, the really old one) project both with wrangler and drag/drop in the UI. I don't know anything about next.js. I had to build first and upload the output. Sounds like you might be trying to upload the source files?

Ddapperdandev I successfully uploaded an AngularJS (yes, the really old one) project both with...

NZX•12/24/24, 8:01 PM

I succeeded . I build the next js internally then outputted the build files

const wpURL = `${process.env.NEXT_PUBLIC_WP_API}/wp-json/wp/v2/${type}?page=${page}` let wpReq = new Request(wpURL, { method: 'GET', cf: { cacheTtl: WP_CACHE_TIME, cacheEverything: true, }, }) const wpResp = await fetch(wpReq) if (!wpResp.ok) { console.error('failed to fetch wp content', wpResp.status) return {} } const wpRes = await wpResp.json() wpResp.headers.forEach((value, name) => { console.log(`header ${name}: ${value}`) })

(log) header x-cache: BYPASS (log) header x-content-type-options: nosniff (log) header x-robots-tag: noindex (log) header x-server: sparta-front-01 (log) header x-skip-cache: 1 (log) header x-wp-total: 138 (log) header x-wp-totalpages: 14

Locally the build works perfectly fine, but not when (auto) building inside Cloudflare

Similar Threads

Similar Threads

Similar Threads