When you run wrangler pages dev does it work properly?

JJames When you run wrangler pages dev does it work properly?

M

Since wrangler dev was working correctly, but errors occurred on Pages, I focused entirely on investigating Pages for a while. I discovered that the error was caused by an environment variable I had set on Pages, which had actually been changed but was still active on the backend, leading to incorrect results. Now, everything is working smoothly without any errors, and it's working really well. Thank you (=.

J

JamesOP•9/18/24, 8:17 AM

Ah nice, glad to hear

L

lucasp•9/18/24, 12:13 PM

Hi people, how are you? I'm trying to use Firebase Auth with Next Auth, that is, the Firebase login is executed in a Next Route, all deployed, but when I deploy and try to use it, it doesn't work. I see the logs with the following error:

FirebaseError: Firebase: Error (auth/network-request-failed).

FirebaseError: Firebase: Error (auth/network-request-failed).

E

Epailes•9/18/24, 6:48 PM

Is anyone else getting this error?

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

This is the contents of my

error.tsx

error.tsx

at the root of my

app

app

directory:

'use client';

export const runtime = 'edge';

export default function Error() {
    return (
        <div>
            <h1>Oops! Something went wrong.</h1>
            <p>Try refreshing the page?</p>
        </div>
    );
}

'use client';

export const runtime = 'edge';

export default function Error() {
    return (
        <div>
            <h1>Oops! Something went wrong.</h1>
            <p>Try refreshing the page?</p>
        </div>
    );
}

'use client';

export const runtime = 'edge';

export default function Error() {
    return (
        <div>
            <h1>Oops! Something went wrong.</h1>
            <p>Try refreshing the page?</p>
        </div>
    );
}

'use client';

export const runtime = 'edge';

export default function Error() {
    return (
        <div>
            <h1>Oops! Something went wrong.</h1>
            <p>Try refreshing the page?</p>
        </div>
    );
}

I also have a

not-found.tsx

not-found.tsx

with this:

export const runtime = 'edge';

export default async function NotFound() {
    // ...
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    );
}

export const runtime = 'edge';

export default async function NotFound() {
    // ...
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    );
}

export const runtime = 'edge';

export default async function NotFound() {
    // ...
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    );
}

export const runtime = 'edge';

export default async function NotFound() {
    // ...
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    );
}

Versions:

"next": "14.2.12",
"@cloudflare/next-on-pages": "^1.13.2",

"next": "14.2.12",
"@cloudflare/next-on-pages": "^1.13.2",

Build command is:

"pages:build": "npx @cloudflare/next-on-pages",

"pages:build": "npx @cloudflare/next-on-pages",

I've tried building after deleting both

error.tsx

error.tsx

and

not-found.tsx

not-found.tsx

and the error persists.
I've also deleted the

.next

.next

,

.vercel

.vercel

, and

node_modules

node_modules

directory then rebuilding everything, issue persists

I've also tried downgrading nextjs to version

14.0.0

14.0.0

as I saw that's what was used in the next-on-pages e2e tests, and the issue persists.

I've went through every

.page.tsx

.page.tsx

,

layout.tsx

layout.tsx

, and

route.tsx

route.tsx

, and specified the edge runtime, I'm completely stumped.
Happens on both my windows machine, and on pages when building on cloudflare

T

thipperz•9/18/24, 9:41 PM

Try removing that 'use client', also remove 'async' from the NotFound() function, and finally make sure you are not computing stuff inside not-found.tsx

Tthipperz Try removing that 'use client', also remove 'async' from the NotFound() function...

E

Epailes•9/18/24, 10:35 PM

Removing

use client

use client

from

error.tsx

error.tsx

gives this:

  ./app/error.tsx must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.

  ./app/error.tsx must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.

Tried taking out the

async

async

from

not-found.tsx

not-found.tsx

(which doesn't have any logic, just returns a div saying "not found", and it still gives the same error:

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /_error
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

E

Epailes•9/18/24, 10:43 PM

If anyone searches this, managed to get it working.
My root

layout.tsx

layout.tsx

file had the following:

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

Which for my use case was fine, nearly every page retrieves data from a CMS, not much gets statically rendered.

Deleting the root layout fixed it and it built successfully, I wonder if it's because I'm using the

platforms

platforms

approach, so don't have a root

page.tsx

page.tsx

file, only a layout.
Will look into it more tomorrow but at least I've found how to make it compile!

L

LiveWithCodeAnkit•9/19/24, 10:07 AM

Hey everyone, I have the same issue. In my root file, layout.tsx, I added the following lines of code:

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

D

D Trombett•9/19/24, 10:27 AM

I think the problem is that the edge runtime doesn't have http and https modules so you should use the built-in fetch

L

LiveWithCodeAnkit•9/19/24, 10:40 AM

@D Trombett But in the Vercel deployment, it runs perfectly without these lines:

export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export const revalidate = 0;

L

LiveWithCodeAnkit•9/19/24, 10:40 AM

if any solution for this please give me

LLiveWithCodeAnkit <@597505862449496065> But in the Vercel deployment, it runs perfectly without t...

D

D Trombett•9/19/24, 10:47 AM

Because Cloudflare next-on-pages requires edge runtime at the moment

D

D Trombett•9/19/24, 10:48 AM

While vercel doesn't

A

Ashish Rawat•9/19/24, 2:46 PM

cloudflare pages is basically useless for next.js app with runtime = 'edge'. Hope they introduce improvement related to this in birthday week

AAshish Rawat cloudflare pages is basically useless for next.js app with runtime = 'edge'. Hop...

�

🍋 Pandeo 🍋•9/19/24, 2:47 PM

What does the runtime edge limit in functionalities ?

A

Ashish Rawat•9/19/24, 2:59 PM

so many, can't use firebase-admin sdk, mongodb sdk etc...

�

🍋 Pandeo 🍋•9/19/24, 3:00 PM

Oh that interesting ahah, because i want to make a next app using supabase so i imagine that i will have some problem to host it on pages ^^'

A

Ashish Rawat•9/19/24, 3:01 PM

I'm using google cloud run atm, will switch to pages once they fix this. On workers with new node_compat_v2, we can use mongodb sdk I guess, though I've not tried it.

�

🍋 Pandeo 🍋•9/19/24, 3:04 PM

I will finish by hosting it on my own kube cluster...

A

Ashish Rawat•9/19/24, 3:04 PM

check this: https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/supported-features/#nodejs

Cloudflare Docs

Supported features | Cloudflare Pages docs

@cloudflare/next-on-pages supports all minor and patch version of Next.js 13 and 14. We regularly run manual and automated tests to ensure compatibility.

�

🍋 Pandeo 🍋•9/19/24, 3:14 PM

Mmhhh, i have some people who are hosting on pages their app with supabase on reddit. But by reading on this feed it look like also some people facing some issue using pages and supabase

LLiveWithCodeAnkit Hey everyone, I have the same issue. In my root file, layout.tsx, I added the fo...

J

JamesOP•9/19/24, 4:38 PM

This is a next.js build error and not something we have control over

T

Tom4sko•9/19/24, 7:16 PM

i dont have error in code :{

T

Tom4sko•9/19/24, 7:16 PM

what is wrong with it

TTom4sko i dont have error in code :{

I

Isaac McFadyen•9/19/24, 7:42 PM

You have ESLint enabled and set to error when it finds a lint that's not followed.

I

Isaac McFadyen•9/19/24, 7:43 PM

Either fix the issue (don't use

any

any

), use a comment above it to allow it (eslint allow I believe?) or disable the ESLint lint.

IIsaac McFadyen You have ESLint enabled and set to error when it finds a lint that's not followe...

�

🍋 Pandeo 🍋•9/19/24, 10:17 PM

It was also that he didn't have installed next on pages module. (He asked help in dm and i have help him)

T

thipperz•9/19/24, 10:43 PM

How can I find what is causing high TTFB in next-on-pages project? Mine has been around 1.7s for the last week so and it hurts me so much

In an example page, I do a KV fetch (probably cached) and render stuff that's all

F

felixv•9/20/24, 6:29 AM

Curious if cloudflare would support partial pre rendering one day

I think Vercel uses node for it but I guess could also be done with edge ?

J

JamesOP•9/20/24, 7:51 AM

That would depend on Vercel not requiring it uses Node.js-based functions for next-on-pages.

P

Patrick•9/21/24, 3:47 AM

Such a lol, fast refresh doesn't work when running

npm run dev

npm run dev

on wsl meanwhile

npm run preview

npm run preview

npm run preview

npm run preview doesn't work within powershell as wrangler does not want to work. Switching between the two is GREAT fun.

K

koribot•9/21/24, 5:23 AM

Hello has anyone got this error
"message": [
"error code: 1016"
],
it says Cloudflare is unable to send requests to a server, I got it on my preview branch but on main branch its working fine

K

koribot•9/21/24, 5:42 AM

the request is in the server component in nextjs, when I change the base_url to my production url it works fine

D

Dalist•9/21/24, 7:50 AM

Is there a way you guys could add more node options within settings presets? also bump bun to 1.1.20+

D

Dalist•9/21/24, 7:51 AM

it's currently using 1.0.1 which is quite old, probably more than a year old

T

trace•9/21/24, 9:46 AM

Need some help to understand this issue.
So I started my next.js project with the pre-configured script

npm create cloudflare@latest -- my-next-app --framework=next

npm create cloudflare@latest -- my-next-app --framework=next

npm create cloudflare@latest -- my-next-app --framework=next

npm create cloudflare@latest -- my-next-app --framework=next

Using radix-theme for the UI, but during build I get

> next build

  ▲ Next.js 14.2.5

Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/@radix-ui/react-primitive/dist/index.mjs
./node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
./node_modules/@radix-ui/themes/dist/esm/components/aspect-ratio.js
./node_modules/@radix-ui/themes/dist/esm/components/index.js
./node_modules/@radix-ui/themes/dist/esm/index.js
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=C%3A%5CUsers%5CSHREYAS%5CDesktop%5Cktc-website%5Capp&appPaths=%2Fnot-found&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/not-found.tsx?__next_edge_ssr_entry__


> Build failed because of webpack errors

> next build

  ▲ Next.js 14.2.5

Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/@radix-ui/react-primitive/dist/index.mjs
./node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
./node_modules/@radix-ui/themes/dist/esm/components/aspect-ratio.js
./node_modules/@radix-ui/themes/dist/esm/components/index.js
./node_modules/@radix-ui/themes/dist/esm/index.js
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=C%3A%5CUsers%5CSHREYAS%5CDesktop%5Cktc-website%5Capp&appPaths=%2Fnot-found&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/not-found.tsx?__next_edge_ssr_entry__


> Build failed because of webpack errors

> next build

  ▲ Next.js 14.2.5

Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/@radix-ui/react-primitive/dist/index.mjs
./node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
./node_modules/@radix-ui/themes/dist/esm/components/aspect-ratio.js
./node_modules/@radix-ui/themes/dist/esm/components/index.js
./node_modules/@radix-ui/themes/dist/esm/index.js
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=C%3A%5CUsers%5CSHREYAS%5CDesktop%5Cktc-website%5Capp&appPaths=%2Fnot-found&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/not-found.tsx?__next_edge_ssr_entry__


> Build failed because of webpack errors

> next build

  ▲ Next.js 14.2.5

Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/@radix-ui/react-primitive/dist/index.mjs
./node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
./node_modules/@radix-ui/themes/dist/esm/components/aspect-ratio.js
./node_modules/@radix-ui/themes/dist/esm/components/index.js
./node_modules/@radix-ui/themes/dist/esm/index.js
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=C%3A%5CUsers%5CSHREYAS%5CDesktop%5Cktc-website%5Capp&appPaths=%2Fnot-found&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/not-found.tsx?__next_edge_ssr_entry__


> Build failed because of webpack errors

Any help to resolve this issue will be highly appreciated

DDalist Is there a way you guys could add more node options within settings presets? als...

J

JamesOP•9/21/24, 12:28 PM

you can set

BUN_VERSION

BUN_VERSION

BUN_VERSION

BUN_VERSION env var to override the bun version

Ttrace Need some help to understand this issue. So I started my next.js project with t...

J

JamesOP•9/21/24, 12:28 PM

i would recommend opening an issue in radix since it seems to come from there

JJames i would recommend opening an issue in radix since it seems to come from there

T

trace•9/21/24, 1:24 PM

Appreciate the response @James will do that now

Ttrace Need some help to understand this issue. So I started my next.js project with t...

O

Oreki•9/21/24, 3:24 PM

I suppose this is happening when you try to change your layout/page's runtime to edge? If so then just create a page.client.tsx file and export every single component from that file using