Cloudflare Developers•2y ago

How to solve this problem? I feel like there's nothing left for my project to compress.

ZZane How to solve this problem? I feel like there's nothing left for my project to co...

akazwz•7/24/24, 4:44 PM

should put large files to R2 or something and use cdn

akazwz•7/24/24, 4:44 PM

check https://developers.cloudflare.com/pages/platform/limits/#file-size

Cloudflare Docs

Limits · Cloudflare Pages docs

Below are limits observed by the Cloudflare Free plan. For more details on removing these limits, refer to the Cloudflare plans page.

Aakazwz should put large files to R2 or something and use cdn

Hard@Work•7/24/24, 4:45 PM

That doesn't work for Functions, as you can't dynamically pull/run JS/WASM

akazwz•7/24/24, 4:47 PM

yes. only something like staic media files can do that

Aakazwz should put large files to R2 or something and use cdn

ZaneOP•7/24/24, 4:48 PM

Hi, I’m a beginner in programming and I’m not very familiar with these concepts. Could you please explain in more detail how I can solve this issue? The information available is quite limited and I need some more guidance. Thank you!

Aakazwz yes. only something like staic media files can do that

ZaneOP•7/24/24, 4:50 PM

If I continue to add more content to my project, will it become increasingly difficult to manage? Is there a better approach to handle large projects with Cloudflare Pages Functions?

ZaneOP•7/24/24, 4:51 PM

I feel like I'm over the limit without doing much.

akazwz•7/24/24, 4:52 PM

maybe you can check why your function so huge. do u import any large staic files?

ZaneOP•7/24/24, 4:55 PM

I didn't even introduce static images, is that a problem with i18n? I have json files in 10 languages.

ZaneOP•7/24/24, 4:55 PM

or the blog page?

akazwz•7/24/24, 5:02 PM

try some bundle analyzer tools: https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer

Optimizing: Bundle Analyzer | Next.js

Analyze the size of your JavaScript bundles using the @next/bundle-analyzer plugin.

Aakazwz try some bundle analyzer tools: https://nextjs.org/docs/app/building-your-applic...

ZaneOP•7/24/24, 5:02 PM

I'll try it, thanks.

FrostTaco•7/25/24, 11:16 PM

I'm getting this error, despite using generateStaticParams and using

export const dynamicParams = false;

export const dynamicParams = false;

Is there anything else necessary to use SSG?

FrostTaco•7/25/24, 11:24 PM

Actually looks like it's this issue

https://github.com/cloudflare/next-on-pages/issues/833
installing vercel@35.0.0 fixed it

Ppowermikee1 Hi guys has anyone managed to get durable objects running with next pages? Firs...

ayming.•7/26/24, 5:36 AM

I am facing the same problem. Did you solve it?

Ian•7/26/24, 10:39 AM

Hi folks, also posted this in Clerk's Discord but this seems related to CloudPages too so hoping someone may be able to help.

The following code will run correctly if I use the Clerk 5.1.6 libraries but not on 5.2.6. If I comment out 'export const runtime= 'experimental-edge' it builds / runs, but not if uncommented. I'm running on Cloudflare Pages which won't build unless I have 'export const runtime= 'experimental-edge' in test.tsx. I also get hydration errors running locally in dev mode unless I comment it out.

I've dug around a lot - can't fix it. Made this ultra simple page in an attempt to eliminate as much as possible. I assume I'm making a mistake here? Grateful for any pointers / help. App is wrapped in <ClerkProvider>, using the Pages Router, middleware file configured as per docs using latest middleware and have protected routes including /test.

import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
import { GetServerSideProps } from "next";
import { ReactElement } from "react";

interface TestProps {
  userId: string | null;
}

export const runtime = 'experimental-edge';

const Test = ({ userId }: TestProps): ReactElement => {
  return (
    <div>
      <h1>User Data</h1>
      <p>User ID: {userId || "Not signed in"}</p>
    </div>
  )
}

export default Test;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { userId } = getAuth(ctx.req);

  return { 
    props: { 
      userId: userId || null,
      ...buildClerkProps(ctx.req)
    } 
  };
};

import { getAuth, buildClerkProps } from "@clerk/nextjs/server";
import { GetServerSideProps } from "next";
import { ReactElement } from "react";

interface TestProps {
  userId: string | null;
}

export const runtime = 'experimental-edge';

const Test = ({ userId }: TestProps): ReactElement => {
  return (
    <div>
      <h1>User Data</h1>
      <p>User ID: {userId || "Not signed in"}</p>
    </div>
  )
}

export default Test;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { userId } = getAuth(ctx.req);

  return { 
    props: { 
      userId: userId || null,
      ...buildClerkProps(ctx.req)
    } 
  };
};

IIan Hi folks, also posted this in Clerk's Discord but this seems related to CloudPag...

ItsWendell•7/26/24, 12:53 PM

What version of Next.js are you on? I think experimental-edge is not experimental anymore for a while now, so try 'edge' instead of 'experimental-edge'

IItsWendell What version of Next.js are you on? I think experimental-edge is not experimenta...

Ian•7/26/24, 3:38 PM

Thanks but AFAIK 'edge' in api routes 'experimental-edge' still on pages. Looks like a regression in Clerk.

FFrostTaco I'm getting this error, despite using generateStaticParams and using `export con...

James•7/26/24, 5:40 PM

i'll give dario a nudge to merge my fix

Ian•7/28/24, 11:12 AM

I'm having a ridiculous amount of trouble getting the simplest of pages functions to work on a nextjs project deployed on cloudflare(has been great). To see if I could figure it out I made a brand new project (following the docs to the letter) using 'npm create cloudflare@latest my-next-app -- --framework=next' - as I am using the Pages router I chose that option during the build. Works fine, deploys fine, the basic /api/hello route returns the expected hello world text. I have setupDevPlatform() in place. Then following the docs I created a /functions directory and added the basic code supplied

export function onRequest(context) {
  return new Response("Hello, world!")
}

export function onRequest(context) {
  return new Response("Hello, world!")
}

which just seems to be ignored. It's seemingly not recognised when it is added, it's not available in the way that /api/hello is on api/helloworld (404), running npm run preview makes no difference. I've crawled all over the docs - can someone please point me in the right direction? Have added a few files with my setup.

package.json995B

next.config.mjs552B

wrangler.toml3.52KB

IItsWendell What version of Next.js are you on? I think experimental-edge is not experimenta...

Ian•7/28/24, 11:14 AM

Seems it's 'edge' if you are on the app router, 'experimental-edge' on the pages router.

IIan I'm having a ridiculous amount of trouble getting the simplest of pages function...

James•7/28/24, 11:46 AM

you can't use pages functions if you're using next-on-pages - you need to use nextjs API routes instead

JJames you can't use pages functions if you're using next-on-pages - you need to use ne...

Ian•7/28/24, 11:51 AM

Haha - be nice if that was mentioned somewhere prominent. Where might I find some guidance on integrating D1 using api routes? Am I still required to use bindings etc etc?

JJames you can't use pages functions if you're using next-on-pages - you need to use ne...

Ian•7/28/24, 12:44 PM

Ok, turns out that was very easy - thank you for the information James.

James•7/28/24, 5:00 PM

No worries

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

Bjarn•7/29/24, 7:43 AM

Searching through the chat logs here I saw your message. Wanted to share some more on this.

I also have this same issue, and shared it on the Nextjs discord and apparently others also have this on just Cloudflare:
https://discord.com/channels/752553802359505017/1267103626967650375

Normally I would create a Github Issue but honestly I have no clue what the reproduction steps are. It happens with the bare minimum already.

Bjarn•7/29/24, 7:43 AM

I'm unable to find any additional information in the logs on CF Pages either

bun•7/29/24, 8:25 AM

yeah its a weird bug, specific to cloudflare, but unless you forcefully refresh your website, it doesnt occur on it's own

villainy•7/29/24, 3:22 PM

17:20:13.217    ▲  Traced Next.js server files in: 350.916ms
17:20:13.293    ▲  Created all serverless functions in: 75.798ms
17:20:17.060    ▲  Collected static files (public/, static/, .next/static): 8.876ms
17:20:17.580    ▲  Build Completed in .vercel/output [1m]
17:20:18.797    ⚡️ Completed `pnpm dlx vercel build`.
17:20:22.087    ⚡️ Unexpected error: Unexpected character '�' (156:302845)
17:20:23.000    Failed: Error while executing user command. Exited with error code: 1
17:20:23.012    Failed: build command exited with code: 1
17:20:24.263    Failed: error occurred while running build command

17:20:13.217    ▲  Traced Next.js server files in: 350.916ms
17:20:13.293    ▲  Created all serverless functions in: 75.798ms
17:20:17.060    ▲  Collected static files (public/, static/, .next/static): 8.876ms
17:20:17.580    ▲  Build Completed in .vercel/output [1m]
17:20:18.797    ⚡️ Completed `pnpm dlx vercel build`.
17:20:22.087    ⚡️ Unexpected error: Unexpected character '�' (156:302845)
17:20:23.000    Failed: Error while executing user command. Exited with error code: 1
17:20:23.012    Failed: build command exited with code: 1
17:20:24.263    Failed: error occurred while running build command

How would i debug this? only hapens on deployment and not when building localy

villainy•7/29/24, 3:27 PM

havent updated anything, it just happened on a random commit that changed some text

villainy•7/29/24, 3:43 PM

retrying deployment 2 times somehow fixed it...

Swyftey•7/29/24, 6:32 PM

How can I still use my nginx proxy with this?

Swyftey•7/29/24, 6:32 PM

My frontend should be port 8080, backend port 3000

using paths, not subdomains

josephgu•7/30/24, 9:08 AM

Hi everyone, I'm getting an error when deploying after creating a new Next.js project using C3:npm run preview

next-cf-demo@0.1.0 preview
npm run pages:build && wrangler pages dev

next-cf-demo@0.1.0 pages:build
npx @cloudflare/next-on-pages

...

Completed

npx vercel build

npx vercel build

.
✘ [ERROR] Could not resolve "pcre-to-regexp/dist/index.js"

node_modules/@cloudflare/next-on-pages/templates/_worker.js/utils/pcre.ts:5:23:
5 │ import createPCRE from 'pcre-to-regexp/dist/index.js';
╵ ~~~~~~

The Yarn Plug'n'Play manifest forbids importing "pcre-to-regexp" here because it's not listed as a
dependency of this package:

../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵

You can mark the path "pcre-to-regexp/dist/index.js" as external to exclude it from the bundle,
which will remove this error.

✘ [ERROR] Could not resolve "cookie"

node_modules/@cloudflare/next-on-pages/templates/_worker.js/routes-matcher.ts:1:22:
1 │ import { parse } from 'cookie';
╵ ~~

The Yarn Plug'n'Play manifest forbids importing "cookie" here because it's not listed as a
dependency of this package:

../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~

You can mark the path "cookie" as external to exclude it from the bundle, which will remove this
error.

Unexpected error: Build failed with 2 errors:

node_modules/@cloudflare/next-on-pages/templates/_worker.js/routes-matcher.ts:1:22: ERROR: Could not resolve "cookie"

node_modules/@cloudflare/next-on-pages/templates/_worker.js/utils/pcre.ts:5:23: ERROR: Could not resolve "pcre-to-regexp/dist/index.js"

KKyzer src/types/cloudflare-env.ts ```javascript interface CloudflareEnv { DB: D1Data...

trace•7/30/24, 11:04 AM

Hey, do you have any public repo with this implementation? I have been trying but has not been very successful. Thanks

Kyzer•7/30/24, 12:48 PM

Nah not really sorry, it should still be the same still from memory just using

npm run dev

npm run dev

, getting any error?

Kyzer•7/30/24, 12:48 PM

I think the only issue i've had with it, is trying to use --turbo when running npm run dev which doesn't work with the auth js beta-19

KKyzer Nah not really sorry, it should still be the same still from memory just using `...

trace•7/30/24, 1:20 PM

Ahh gotcha. I think I am messing by while connecting to the d1 db. Let me try a bit more tho

Haysquare•7/30/24, 1:59 PM

Hello there
I'm having issue connecting my github account to my cloudflare pages for deployment, i keep getting
an error occurred, i should contact

Haysquare•7/30/24, 2:20 PM

hello there

jdruwe•7/30/24, 2:29 PM

Anyone else working with next-on-pages and having issues with the

__NEXT_ON_PAGES__KV_SUSPENSE_CACHE

__NEXT_ON_PAGES__KV_SUSPENSE_CACHE

, for us the KV is never being populated with fetch data, even when I use force-cache

Erisa•7/31/24, 2:04 PM

you can't, it's not supported

Jorgo•7/31/24, 2:09 PM

Hello everyone
Has anyone ever experienced an error where the data shows fine on local host but deployed get status 200 but the data is nowhere to be found

https://github.com/Jorgo55/newpages-for-freelancers

here is a more detailed description of the issue if you want to check it out
i am ready to reward anyone if they can help me
thanks for more info just hmu here on discord

GitHub

GitHub - Jorgo55/newpages-for-freelancers: New Pages for freelancer...

New Pages for freelancers to check out cloudflare and Next js problem on displaying data - Jorgo55/newpages-for-freelancers

Original message was deleted

josephgu•8/2/24, 10:27 AM

I don't know why there is a .pnp.cjs file in my ~/ directory(maybe there are some mistakes in setting up yarn). It shouldn't be there. After deleting it, everything worked fine. Thank you for your help

jdruwe•8/2/24, 11:52 AM

I updated my issue @ https://github.com/cloudflare/next-on-pages/issues/844 seems to be related to the worker version, will also cross post to those channel(s)

GitHub

[🐛 Bug]: Workers KV for caching fetch requests is not working · Iss...

next-on-pages environment related information System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.5.0: Wed May 1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000 CPU...

James•8/2/24, 6:32 PM

fwiw I disagree with using KV for fetch cache generally and have since we first implemented it since it's eventually consistent which means managing the manifest for the cache is unreliable (and fetch cache is supposed to be regional according to Vercel docs)

jdruwe•8/2/24, 9:52 PM

But it's described as "So for the above reasons the Workers KV storage solution is the one we recommend." in the docs?

import { getAuth, buildClerkProps } from "@clerk/nextjs/server"; import { GetServerSideProps } from "next"; import { ReactElement } from "react"; interface TestProps { userId: string | null; } export const runtime = 'experimental-edge'; const Test = ({ userId }: TestProps): ReactElement => { return ( <div> <h1>User Data</h1> <p>User ID: {userId || "Not signed in"}</p> </div> ) } export default Test; export const getServerSideProps: GetServerSideProps = async (ctx) => { const { userId } = getAuth(ctx.req); return { props: { userId: userId || null, ...buildClerkProps(ctx.req) } }; };

17:20:13.217 ▲ Traced Next.js server files in: 350.916ms 17:20:13.293 ▲ Created all serverless functions in: 75.798ms 17:20:17.060 ▲ Collected static files (public/, static/, .next/static): 8.876ms 17:20:17.580 ▲ Build Completed in .vercel/output [1m] 17:20:18.797 ⚡️ Completed `pnpm dlx vercel build`. 17:20:22.087 ⚡️ Unexpected error: Unexpected character '�' (156:302845) 17:20:23.000 Failed: Error while executing user command. Exited with error code: 1 17:20:23.012 Failed: build command exited with code: 1 17:20:24.263 Failed: error occurred while running build command

How to solve this problem? I feel like there's nothing left for my project to compress.

Similar Threads

Similar Threads

Similar Threads