next-on-pages has a way for you to use the next dev server for local dev - https://github.com/cloudf

JJames next-on-pages has a way for you to use the next dev server for local dev - https...

J

Juul•12/6/24, 10:01 AM

I am using the Next dev server locally a lot and

setupDevPlatform

setupDevPlatform

setupDevPlatform

setupDevPlatform is definitely helpful there. But sometimes I have to debug an issue due to the subtle differences between runtimes of

next dev

next dev

next dev

next dev (Vercel Edge) and

wrangler pages dev

wrangler pages dev

(workerd) because the latter is what runs on production. So I'm looking for a faster workflow to do that locally. Is the best option currently to run

npx @cloudflare/next-on-pages --watch

npx @cloudflare/next-on-pages --watch

npx @cloudflare/next-on-pages --watch

npx @cloudflare/next-on-pages --watch, and then re-run

wrangler pages dev

wrangler pages dev

on changes to the build assets? I tried the

--live-reload

--live-reload

--live-reload

--live-reload functionality of

wrangler pages dev

wrangler pages dev

in this situation but it did not seem to trigger reloads of the browser page. And when I manually reload the page, it still referencing the JS chunk files from the original build in the page index HTML causing loading errors until I manually restart the Wrangler dev server. I haven't tried Nodemon yet to restart the Wrangler dev server on build changes, so that might be an option. I'm curious how other people are tackling this.

0

0xCC•12/6/24, 10:03 AM

Any update on nextJS cloudfalre deploy - my build was working well before, but tonight rebuild hit an issue

22:50:27.881    ▲  Its type '() => Promise<JSX.Element>' is not a valid JSX element type.
22:50:27.881    ▲    Type '() => Promise<JSX.Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
22:50:27.881    ▲      Type 'Promise<Element>' is not assignable to type 'ReactNode'.

22:50:27.881    ▲  Its type '() => Promise<JSX.Element>' is not a valid JSX element type.
22:50:27.881    ▲    Type '() => Promise<JSX.Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
22:50:27.881    ▲      Type 'Promise<Element>' is not assignable to type 'ReactNode'.

22:50:27.881    ▲  Its type '() => Promise<JSX.Element>' is not a valid JSX element type.
22:50:27.881    ▲    Type '() => Promise<JSX.Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
22:50:27.881    ▲      Type 'Promise<Element>' is not assignable to type 'ReactNode'.

22:50:27.881    ▲  Its type '() => Promise<JSX.Element>' is not a valid JSX element type.
22:50:27.881    ▲    Type '() => Promise<JSX.Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
22:50:27.881    ▲      Type 'Promise<Element>' is not assignable to type 'ReactNode'.

Nothing wrong with local build

BBabacar <@729699826740101250> any updates on this? I’ve been experiencing the same issu...

0

0xCC•12/6/24, 10:37 AM

I saw someone has raised issue here - https://github.com/cloudflare/next-on-pages/issues/914

GitHub

[🐛 Bug]: build error · Issue #914 · cloudflare/next-on-pages

next-on-pages environment related information No response Description it buid is good yesterday, but it is error today, i do nothing of my code this is the error 14:15:26.583 ▲ ./src/app/[lang]/lay...

N

num•12/6/24, 3:23 PM

thanks for the post i was going insane why it suddenly broke for me without any change in the lockfile or similar

JJuul I am using the Next dev server locally a lot and `setupDevPlatform ` is definite...

J

JamesOP•12/6/24, 5:46 PM

Afraid there isn't a good workflow for that

R

R in Tokyo•12/7/24, 12:56 AM

@James Thanks for the work you’ve been doing! I posted a feature request based on Next 15 caching mechanism…. https://github.com/cloudflare/next-on-pages/issues/913

Any recommendations for the time being to get cache working with v 15?

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

Original message was deleted

B

bright_parrot_49151•12/7/24, 1:51 AM

N

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

I really don't get it so either vercel is pulling some changed type defs into the pages build only on cloudflare or the build environment is using different typedefs. I also tried to update vercel but it didn't cause the issue we're seeing in the workers build

C

Clément•12/7/24, 10:40 AM

I have downgraded Vercel and next-on-pages

C

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

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

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

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

JamesOP•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

JamesOP•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

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

JamesOP•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ément•12/9/24, 1:25 PM

Hello, I cannot retrieve my

env variable

env variable

env variable

env variable when my project is build on cloud flare.

process.env.MY_VARIABLE

process.env.MY_VARIABLE

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ément•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ément•12/10/24, 11:48 PM

@Babacar I already tried

C

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

C

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

Within a server action

C

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

next-on-pages has a way for you to use the next dev server for local dev - https://github.com/cloudf

Similar Threads

Similar Threads

Similar Threads