I have downgraded Vercel and next-on-pages

C

ClémentOP•12/7/24, 10:41 AM

I had issues at build too

CClément I have downgraded Vercel and next-on-pages

N

num•12/7/24, 12:51 PM

on which version were you able to build on cf again? The case in that bug issue is that it works just fine locally (even vercel/next on pages build) with frozen lockfile dependencies but breaks on the cf build

Nnum on which version were you able to build on cf again? The case in that bug issue ...

C

ClémentOP•12/7/24, 12:53 PM

Delete node-modules if you are in bun

"vercel": "37.14.0",

cloudflare/next-on-pages": "1.13.5

N

num•12/7/24, 1:07 PM

that doesn't seem to change anything. Issue is that i didn't touch any dependencies or code. It just broke the typescript compiling in the vercel build step without any exterior changes. Meaning i also can't reproduce it locally if i run a next-on-pages build Issue seemed to be incorrectly picked pnpm version in the cf build which caused the lockfile to be ignored

00xCC I saw someone has raised issue here - https://github.com/cloudflare/next-on-page...

0

0xCC•12/8/24, 8:42 AM

Any updateds???@James

00xCC Any updateds???<@94508156243161088>

N

num•12/8/24, 9:02 AM

have you checked your build log to see if the package manager is correct and your package lock being used?

N

num•12/8/24, 9:03 AM

e.g. check if something like

Ignoring not compatible lockfile at /opt/buildhome/repo/pnpm-lock.yaml

Ignoring not compatible lockfile at /opt/buildhome/repo/pnpm-lock.yaml

is logged during the install step

N

num•12/8/24, 9:14 AM

i'm wondering if this is the case. Would it be possible to force pnpm install to run with

--frozen-lockfile

--frozen-lockfile

?
In that case the warning that prob everybody misses is an error:

pnpm install --frozen-lockfile
 ERR_PNPM_LOCKFILE_BREAKING_CHANGE  Lockfile /path/to/proj/pnpm-lock.yaml not compatible with current pnpm

pnpm install --frozen-lockfile
 ERR_PNPM_LOCKFILE_BREAKING_CHANGE  Lockfile /path/to/proj/pnpm-lock.yaml not compatible with current pnpm

Nnum have you checked your build log to see if the package manager is correct and you...

0

0xCC•12/8/24, 9:58 AM

there is an answwr in the guithub repo -

Adding the packageManager field to our package.json fixed it, e.g.

 "packageManager": "pnpm@9.12.2+sha256.2ef6e547b0b07d841d605240dce4d635677831148cd30f6d564b8f4f928f73d2",

Adding the packageManager field to our package.json fixed it, e.g.

 "packageManager": "pnpm@9.12.2+sha256.2ef6e547b0b07d841d605240dce4d635677831148cd30f6d564b8f4f928f73d2",

Adding the packageManager field to our package.json fixed it, e.g.

 "packageManager": "pnpm@9.12.2+sha256.2ef6e547b0b07d841d605240dce4d635677831148cd30f6d564b8f4f928f73d2",

Adding the packageManager field to our package.json fixed it, e.g.

 "packageManager": "pnpm@9.12.2+sha256.2ef6e547b0b07d841d605240dce4d635677831148cd30f6d564b8f4f928f73d2",

0

0xCC•12/8/24, 9:58 AM

it works for me

N

num•12/8/24, 10:03 AM

So your issue was also that the incorrect pnpm version was picked? Does it fully build again? @0xCC

00xCC Any updateds???<@94508156243161088>

J

James•12/8/24, 10:56 AM

Both Dario and another person have responded to that thread

RR in Tokyo <@94508156243161088> Thanks for the work you’ve been doing! I posted a feature r...

J

James•12/8/24, 10:57 AM

I’m afraid i haven’t actually looked at v15 yet, so unsure of the differences in how caching is treated internally in edge builds

N

neoney•12/8/24, 6:31 PM

Hi, I'm trying to use a package that imports

node:async_hooks

node:async_hooks

inside of the custom entrypoint. However, it errors out:

✘ [ERROR] Could not resolve "node:async_hooks"

      2 │ import { AsyncLocalStorage } from 'node:async_hooks';
        ╵                                   ~~~~~~~~~~~~~~~~~~

  The package "node:async_hooks" 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 "node:async_hooks"

      2 │ import { AsyncLocalStorage } from 'node:async_hooks';
        ╵                                   ~~~~~~~~~~~~~~~~~~

  The package "node:async_hooks" 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 "node:async_hooks"

      2 │ import { AsyncLocalStorage } from 'node:async_hooks';
        ╵                                   ~~~~~~~~~~~~~~~~~~

  The package "node:async_hooks" 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 "node:async_hooks"

      2 │ import { AsyncLocalStorage } from 'node:async_hooks';
        ╵                                   ~~~~~~~~~~~~~~~~~~

  The package "node:async_hooks" 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.

I don't think this is correct, as node:async_hooks should be available with nodejs_compat, right? Is this some issue on my end?

D

D Trombett•12/8/24, 7:03 PM

I got the same error recently but I'm not sure how I fixed it

D

D Trombett•12/8/24, 7:03 PM

I think by updating the node version used by cloudflare?

N

neoney•12/8/24, 10:03 PM

huuuh

S

Sam•12/8/24, 10:14 PM

Rebuilding the exact same project without any code changes now results in the following error on a pages build:

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
23:13:35.716    ▲  Failed to compile.
23:13:35.717    ▲  ./src/app/[locale]/categorieen/[...id]/page.tsx:1:10
23:13:35.717    ▲  Type error: Module '"react"' has no exported member 'use'.
23:13:35.718    ▲  
23:13:35.718    ▲  > 1 | import { use } from 'react';
23:13:35.718    ▲      |          ^
23:13:35.718    ▲    2 | import { and, eq, isNotNull } from 'drizzle-orm';
23:13:35.718    ▲    3 | import { redirect } from '@/i18n/routing';
23:13:35.718    ▲    4 | import { notFound } from 'next/navigation';
23:13:35.783    ▲  ELIFECYCLE  Command failed with exit code 1.
23:13:35.823    ▲  Error: Command "pnpm run build" exited with 1

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
23:13:35.716    ▲  Failed to compile.
23:13:35.717    ▲  ./src/app/[locale]/categorieen/[...id]/page.tsx:1:10
23:13:35.717    ▲  Type error: Module '"react"' has no exported member 'use'.
23:13:35.718    ▲  
23:13:35.718    ▲  > 1 | import { use } from 'react';
23:13:35.718    ▲      |          ^
23:13:35.718    ▲    2 | import { and, eq, isNotNull } from 'drizzle-orm';
23:13:35.718    ▲    3 | import { redirect } from '@/i18n/routing';
23:13:35.718    ▲    4 | import { notFound } from 'next/navigation';
23:13:35.783    ▲  ELIFECYCLE  Command failed with exit code 1.
23:13:35.823    ▲  Error: Command "pnpm run build" exited with 1

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
23:13:35.716    ▲  Failed to compile.
23:13:35.717    ▲  ./src/app/[locale]/categorieen/[...id]/page.tsx:1:10
23:13:35.717    ▲  Type error: Module '"react"' has no exported member 'use'.
23:13:35.718    ▲  
23:13:35.718    ▲  > 1 | import { use } from 'react';
23:13:35.718    ▲      |          ^
23:13:35.718    ▲    2 | import { and, eq, isNotNull } from 'drizzle-orm';
23:13:35.718    ▲    3 | import { redirect } from '@/i18n/routing';
23:13:35.718    ▲    4 | import { notFound } from 'next/navigation';
23:13:35.783    ▲  ELIFECYCLE  Command failed with exit code 1.
23:13:35.823    ▲  Error: Command "pnpm run build" exited with 1

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
23:13:35.716    ▲  Failed to compile.
23:13:35.717    ▲  ./src/app/[locale]/categorieen/[...id]/page.tsx:1:10
23:13:35.717    ▲  Type error: Module '"react"' has no exported member 'use'.
23:13:35.718    ▲  
23:13:35.718    ▲  > 1 | import { use } from 'react';
23:13:35.718    ▲      |          ^
23:13:35.718    ▲    2 | import { and, eq, isNotNull } from 'drizzle-orm';
23:13:35.718    ▲    3 | import { redirect } from '@/i18n/routing';
23:13:35.718    ▲    4 | import { notFound } from 'next/navigation';
23:13:35.783    ▲  ELIFECYCLE  Command failed with exit code 1.
23:13:35.823    ▲  Error: Command "pnpm run build" exited with 1

Two weeks ago the build worked perfectly fine. Anyone knows what causes this?

S

Sam•12/8/24, 10:15 PM

S

Sam•12/8/24, 10:22 PM

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

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

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...

N

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...

J

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...

S

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

Great, that's it yeah. Thanks

N

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

C

ClémentOP•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 ?

C

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

It is on a server-action

N

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

does instrumentation hook work on next-on-pages?

N

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

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

N

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

yes in dev, not in prod

R

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}`)
  })

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

  (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

K

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

How do I fix XMLHttpRequest is undefined?

T

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

C

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

@Babacar I already tried

C

ClémentOP•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...

C

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

Within a server action

C

ClémentOP•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...

C

ClémentOP•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

J

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...

C

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

It’s in secret

G

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.

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?

G

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

J

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

Sounds like a potential bug

M

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

S

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...

P

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

I have downgraded Vercel and next-on-pages

Similar Threads

Similar Threads

Similar Threads