Cloudflare Developers•2y ago

Pages not creating Worker, NextJS returns 404

Hi, I am deploying a NextJS project to Pages, however, every route returns a 404. It uses the Edge runtime and only contains dynamic pages. It succesfully compiles en uploads the assets, but it's not creating a Worker it seems. When starting a Log Stream I also get the following error. Thanks!

164 Replies

Walshy•2y ago

It doesn't look like a Function is being uploaded there Which is a little weird given we seem to compile it fine... @5927 any ideas?

James•2y ago

No ideas over here. It looks like it managed to find, compile, and deploy the worker fine, so I would lean on the side of a possible pages/cloudflare issue instead

BjarnOP•2y ago

It indeed doesn't show any references to a "functions" folder under the Assets tab

Walshy•2y ago

We haven't updated Wrangler in the build container Or even done a new build image release in like a month What next-on-pages version are you using @bjarn ?

BjarnOP•2y ago

1.0.2 I guess, let me check

BjarnOP•2y ago

BjarnOP•2y ago

Yep! @walshydev

Walshy•2y ago

Another 2 follow ups: * Is your repo open source? If so, can you share the link * What's your root directory set to?

BjarnOP•2y ago

This one sadly isn't, but my root dir is src/

Walshy•2y ago

there we go i bet that's why The Functions should be generated at the root of the project but it seems you're in one dir try root of /

BjarnOP•2y ago

Ohh the setting? It's just the code that's in the src/ folder, the rest of the project files (package.json etc etc) is in /, one sec

BjarnOP•2y ago

BjarnOP•2y ago

is this what you mean? @walshydev The Pages project is set to the default build/project dir, so npx next-on-pages@1 and /

BjarnOP•2y ago

BjarnOP•2y ago

Can this be why it's not deploying correctly? It looks like it's compiling the functions to a different folder than /functions

James•2y ago

No, that's just how we build our worker for next-on-pages Can you send a screenshot of your build settings on your pages project dashboard just to confirm you're using the correct directories

BjarnOP•2y ago

BjarnOP•2y ago

Definitely, let me know if you need anything else which might help

BjarnOP•2y ago

spectate-frontend.38...

BjarnOP•2y ago

Got some more complete logs too

James•2y ago

It does all look fine and like it should work okay to me :/

BjarnOP•2y ago

Yea same to me haha I had a different project that had a very similar setup which worked, but that was a couple of weeks ago (had to move it from pages due to other issues which are unrelated, just some stuff that wasn't supported yet) not sure if it makes a difference, I'm on the paid bundled plan btw

James•2y ago

Personally, I still think it might be a cloudflare issue with your pages project. Perhaps you could try making a new pages project and seeing if it'll work maybe?

BjarnOP•2y ago

Sure! I'll try that

BjarnOP•2y ago

BjarnOP•2y ago

No luck sadly

BjarnOP•2y ago

Oh interesting, when I try to build and upload locally it produces a completely different result. Less chunks (in the 400's instead 800's) and now it fails with this code

BjarnOP•2y ago

but when building and deploying CF Pages didn't show "Compiled Worker successfully" etc

Walshy•2y ago

Looks like it's uploading there

BjarnOP•2y ago

Ah check Running the local build in dev mode throws:

Error: No such module "__next-on-pages-dist__/functions/index.func.js".
    at g (index.js:335:35)
    at ct (index.js:508:65)
    at $ (index.js:498:10)
    at async jsonError (index.js:530:12) {
  stack: Error: No such module "__next-on-pages-dist__/func…:498:10)
    at async jsonError (index.js:530:12),
  message: No such module "__next-on-pages-dist__/functions/index.func.js".
}

Error: No such module "__next-on-pages-dist__/functions/index.func.js".
    at g (index.js:335:35)
    at ct (index.js:508:65)
    at $ (index.js:498:10)
    at async jsonError (index.js:530:12) {
  stack: Error: No such module "__next-on-pages-dist__/func…:498:10)
    at async jsonError (index.js:530:12),
  message: No such module "__next-on-pages-dist__/functions/index.func.js".
}

might be related to the issues on CF Pages? Wondering if I should contact CF directly. Will have to get a Pro subscription for that it seems but it's fine, if this gets fixed it's worth it 😂

Walshy•2y ago

I mean it'll go to me :p The CI there's no "uploading bundle" so for whatever reason, it isn't finding the Functions bundle. This is gonna be something in the next-on-pages stuff where James is the pro. You can file an issue on https://github.com/cloudflare/next-on-pages/issues too for our frameworks team to see but I'm not seeing anything from Pages side that's wrong but this isn't my area of expertise

James•2y ago

There isn't much help I'll be able to offer about the no such module error without some sort of reproduction to play around with unless there are build errors. Other than of course asking which wrangler version you're using It would be nice to try and have something to play around with. Perhaps you could try and see if you are able to reproduce these issues with something you would be able to share?

BjarnOP•2y ago

Will do, will keep you posted @walshydev / @5927 fyi: it seems to be related to something with project in specific. First I created a new project to try and reproduce it, but it worked fine. So now I have stripped a ton of pages out of my project (keeping auth routes + index (dashboard) which is behind auth) and it now deploys fine. I am going to slowly readd some pages. But I am questioning, can it be that I had too many functions? It has now deployed ~100 instead of ~800

BjarnOP•2y ago

Just stumbled upon this error

BjarnOP•2y ago

(deployments before this were successfull, including working functions)

BjarnOP•2y ago

GitHub

🐛 BUG: "Got error: multipart: message too large" when deploying for...

Which Cloudflare product(s) does this pertain to? Pages What version of Wrangler are you using? 3.0.1 What operating system are you using? Windows Describe the Bug I am having issue with Pages depl...

James•2y ago

Ah yeah... Had a few people mention that one. No idea why people are running into it sadly because the _worker.js directory that we use is rather undocumented in how things work

BjarnOP•2y ago

Ah check, I'm currently reverting all my changes as I think I have narrowed the issue down to the directory containing the error btw. Will post updates here as I find more details on this haha This is interesting So, I've readded all files except the folder that has triggered the multipart error, build succeeds and deployment works great Then, I readded that folder without any changes, and the build succeeds (not throwing that error), but, as before, functions do not deploy

James•2y ago

Interesting

BjarnOP•2y ago

Trying to narrow down the file in that folder now, this is getting more interested by the minute haha There're a couple of files that trigger the issues, however, I seem to be stuck with the multipart one now, believing it might be the actual issue but it's hiding the error not sure how to debug this further

James•2y ago

If you happened to be able to share a reproduction of the multipart problem on that thread, it would be super helpful, although you probably won't be able to share your code I assume.

BjarnOP•2y ago

Managed to nail it down to 1 specific file now, finding out which of the components included that there might be it (as they're used on other pages too which don't cause issues) I'll try to see if I can make a reproduction with this file

Walshy•2y ago

👀 interesting

BjarnOP•2y ago

BjarnOP•2y ago

Nailed it down to one specific component in that page, damn so, it's a very simple page:

"use client";

import React from "react";

import { useMonitorContext } from "app/(authenticated)/monitors/[monitorId]/_components/MonitorContextProvider";
import CountryFlag from "app/_components/CountryFlag";
import { Card, CardTitle } from "app/_components/ui/Card";
import ucfirst from "app/_lib/ucfirst";

export default function Summary() {
  const monitor = useMonitorContext();

  return (
    <Card wrap>
      <CardTitle>Monitor</CardTitle>
      {!!monitor && (
        <div className="mt-4 flex flex-col gap-2">
          <div className="flex flex-col">
            <div className="text-sm text-gray-500">IP address</div>
            <div className="text-sm font-medium">{monitor?.ip_address}</div>
          </div>
          <div className="flex flex-col">
            <div className="text-sm text-gray-500">Location</div>
            <div className="flex gap-1 text-sm font-medium">
              <CountryFlag
                countryCode={ucfirst(
                  monitor.ip_location?.split(" ").at(-1)?.toLowerCase() ?? "Us"
                )}
                className="w-5 rounded-sm"
              />
              <span>
                {monitor?.ip_location?.split(", ").slice(0, -1).join(", ")}
              </span>
            </div>
          </div>
          <div className="flex flex-col">
            <div className="text-sm text-gray-500">ISP</div>
            <div className="text-sm font-medium">{monitor?.isp}</div>
          </div>
        </div>
      )}
    </Card>
  );
}

"use client";

import React from "react";

import { useMonitorContext } from "app/(authenticated)/monitors/[monitorId]/_components/MonitorContextProvider";
import CountryFlag from "app/_components/CountryFlag";
import { Card, CardTitle } from "app/_components/ui/Card";
import ucfirst from "app/_lib/ucfirst";

export default function Summary() {
  const monitor = useMonitorContext();

  return (
    <Card wrap>
      <CardTitle>Monitor</CardTitle>
      {!!monitor && (
        <div className="mt-4 flex flex-col gap-2">
          <div className="flex flex-col">
            <div className="text-sm text-gray-500">IP address</div>
            <div className="text-sm font-medium">{monitor?.ip_address}</div>
          </div>
          <div className="flex flex-col">
            <div className="text-sm text-gray-500">Location</div>
            <div className="flex gap-1 text-sm font-medium">
              <CountryFlag
                countryCode={ucfirst(
                  monitor.ip_location?.split(" ").at(-1)?.toLowerCase() ?? "Us"
                )}
                className="w-5 rounded-sm"
              />
              <span>
                {monitor?.ip_location?.split(", ").slice(0, -1).join(", ")}
              </span>
            </div>
          </div>
          <div className="flex flex-col">
            <div className="text-sm text-gray-500">ISP</div>
            <div className="text-sm font-medium">{monitor?.isp}</div>
          </div>
        </div>
      )}
    </Card>
  );
}

The culprit here is the CountryFlag component. It already was a bit hacky, but it worked. However, it's also used on other pages, not causing issues. the CountryFlag component looks like this:

import { lazy, Suspense } from "react";

export default function CountryFlag({
  countryCode,
  className,
}: {
  countryCode: string;
  className?: string;
}) {
  const Flag = lazy(() => import(`app/_assets/svg/flags/${countryCode}`));

  return (
    <Suspense fallback={<div className={className} />}>
      <Flag className={className} />
    </Suspense>
  );
}

import { lazy, Suspense } from "react";

export default function CountryFlag({
  countryCode,
  className,
}: {
  countryCode: string;
  className?: string;
}) {
  const Flag = lazy(() => import(`app/_assets/svg/flags/${countryCode}`));

  return (
    <Suspense fallback={<div className={className} />}>
      <Flag className={className} />
    </Suspense>
  );
}

I guess, this is where the issue is

James•2y ago

My money would be on that lazy loading

BjarnOP•2y ago

but it's weird that this is causing all the deployment issues yep mine too Going to revert all my test commits (again) and then remove this component again, see if I did not make any other accidental changes but thinking why this only causes issues on CF Pages

James•2y ago

Do the other pages using the component have the edge runtime?

BjarnOP•2y ago

Yep, I apply the edge runtime on my root layout so it's applied on all the others

James•2y ago

Hold up, opting the root layout in applies to the entire site?? I did not know that 😮

BjarnOP•2y ago

Yup it seemed to work

BjarnOP•2y ago

at least they're all marked as streamed/edge now

James•2y ago

That's interesting, nice to know!

BjarnOP•2y ago

inb4 that causes the issues

James•2y ago

I guess now I can't make my guess about static analysis potentially causing it haha

BjarnOP•2y ago

Static analysis?

James•2y ago

When a route isn't opted into the edge runtime, nextjs performs some sort of static analysis and prerenders the page, but since they're all edge runtime that won't apply here

BjarnOP•2y ago

Ahhhh! Yea maybe this doesn't actually work but makes next (and CF) believe it's Edge but it's actually not but my auth calls (which are async function in server components) work, as I get redirect to my login page so I guess they work fine

James•2y ago

If the Vercel CLI shows that edge icon, it's generating an edge function for the route, so it's definitely making nextjs interpret them all as the edge runtime

BjarnOP•2y ago

yea exactly I didn't think that thought would be legit haha, would be crazy tho Latest deploy's almost done, with no changes except commenting out the lazy stuff and hard coding the "US flag" component 🥁 it's succesfull, let's see if it runs and deployed the worker it did!

import SvgUs from "app/_assets/svg/flags/Us";

export default function CountryFlag({
  countryCode,
  className,
}: {
  countryCode: string;
  className?: string;
}) {
  // const Flag = lazy(() => import(`app/_assets/svg/flags/${countryCode}`));

  return (
    // <Suspense fallback={<div className={className} />}>
    <SvgUs className={className} />
    // </Suspense>
  );
}

import SvgUs from "app/_assets/svg/flags/Us";

export default function CountryFlag({
  countryCode,
  className,
}: {
  countryCode: string;
  className?: string;
}) {
  // const Flag = lazy(() => import(`app/_assets/svg/flags/${countryCode}`));

  return (
    // <Suspense fallback={<div className={className} />}>
    <SvgUs className={className} />
    // </Suspense>
  );
}

these 3 lines are the only changes now

James•2y ago

Very interesting indeed

Walshy•2y ago

did we test with only suspense or flag commented out?

BjarnOP•2y ago

nope, will do that deploying with suspense uncommented worked with suspense so it definitely is the lazy call I remember I had an issue here with dynamic() (which basically does this) and I just opted for lazy instead, might be something going wrong there that dynamic did catch already

James•2y ago

BjarnOP•2y ago

that's something I'll debug tomorrow, haha, bedtime for me now, some progress at least!

Walshy•2y ago

thank you for your help! This was very useul

BjarnOP•2y ago

Couldn't resist, added dynamic, deploys without errors, but no functions again

import dynamic from "next/dynamic";

export default function CountryFlag({
  countryCode,
  className,
}: {
  countryCode: string;
  className?: string;
}) {
  const Flag = dynamic<{ className?: string }>(
    () => import(`app/_assets/svg/flags/${countryCode}`),
    {
      ssr: false,
      loading: () => <div className={className} />,
    }
  );

  return <Flag className={className} />;
}

import dynamic from "next/dynamic";

export default function CountryFlag({
  countryCode,
  className,
}: {
  countryCode: string;
  className?: string;
}) {
  const Flag = dynamic<{ className?: string }>(
    () => import(`app/_assets/svg/flags/${countryCode}`),
    {
      ssr: false,
      loading: () => <div className={className} />,
    }
  );

  return <Flag className={className} />;
}

np! thank you both too for looking into this with me 🙂 Oh! I actually was mistaken, I only use this component in one page (I had a different way to get countryflags somewhere else where I knew the elementtype beforehand, but was also called CountryFlag) so it makes sense that only this part breaks the app Maybe knowing this a reproduction can be made, but that's something I'll save for tomorrow hahah

James•2y ago

Ha! Makes perfect sense then! Nice work pin pointing the cause of this problem 🙂 now to spend days wondering why nextjs does a goofy on us 😦

BjarnOP•2y ago

Yea :/ lazy causes the multipart error, dynamic doesn't, but prevents spawning a worker somehow that's basically the conclusion so far

James•2y ago

😻 will probably add something about this to the docs if I'm able to reproduce

BjarnOP•2y ago

also, the CountryFlag component itself is not marked as use client, it's parent is. So it should be used as client component as the parent is the entrypoint. Deploying with CountryFlag marked as use client now and then really going to sleep 😂 nice! "use client" didn't work, as expected as the parent already is the client entrypoint Going to investigate the countryflag again also looking into issues with SSR calls, apparently I can't use credentials, didn't know that. Have to find a way to do stateful authentication without it

BjarnOP•2y ago

Also trying to debug this locally (as it uses the Workers runtime right?) but receiving these issues which do not appear to happen on CF Pages:

James•2y ago

Are you using wrangler V3?

BjarnOP•2y ago

yup, 3.1.0

BjarnOP•2y ago

I saw a thread indeed from february

James•2y ago

It's just .vercel/output/static You don't put the /_worker.js

BjarnOP•2y ago

ahhhh

BjarnOP•2y ago

literally like this?

James•2y ago

Yes That doesn't look good

BjarnOP•2y ago

let me rebuild one more time haha nope

James•2y ago

Oh you aren't doing pages dev

BjarnOP•2y ago

ohhhh woops that makes sense then (note to self: read the docs 🙂 )

James•2y ago

BjarnOP•2y ago

This issue is getting more and more complicated sadly, but we'll get there Server side authentication should be possible on CF Pages right?

James•2y ago

There shouldn't be any problems doing server side auth, what's up?

BjarnOP•2y ago

Figuring that out now haha, but first the credentials had to be replaced. It "works", but getting a redirect loop after logging in now, but this is project related so trying to figure that out now. I do get this issue with Nextjs tho: https://github.com/cloudflare/workers-sdk/issues/3259 Might've found the culprit doing a referrer check on the 2fa page, but the the worker can't access headers is that right?

James•2y ago

the response.clone thing is just a wrangler template issue i believe, you can ignore that

BjarnOP•2y ago

Ah alright! I'm starting to think my project/edge runtime is not ready yet for this project. Lots of issues hard to debug with no real logs, opening up pandora's box. But I want to host on CF Pages so hard haha

James•2y ago

😔 What are the issues you're running into now?

BjarnOP•2y ago

Still the redirect, but with Nextjs Edge runtime, this happens:

BjarnOP•2y ago

and it's completely fine on de default node runtime (this is unrelated to CF)

James•2y ago

This video is like 120p or something i can't really read anything in it lol

BjarnOP•2y ago

oh lol discord what happened there haha wait let me get another one Classic. Rerecording and it works now. but probably something changed

James•2y ago

🤣 Gotta love it when things magically fix themselves as soon as you want to show it to someone

BjarnOP•2y ago

yea lol but this is certainly still broken, it has to be xD Apparently nextjs just dumps your entire component structure in an exception, not sure what happened there Dev mode works at least, let's build something and try with wrangler

James•2y ago

Ah yeah this will be where it breaks for sure

BjarnOP•2y ago

Have to give a flash warning no joke, if you're sensitive to epilepsy or something after a refresh you're logged in fine, but somehow when built with next-on-pages and running on wrangler, this happens. let me try with a normal prod build the request failed is expected btw, just auth calls failing as I'm not logged in yet

James•2y ago

How very bizarre. There must be some client-side code somewhere that is supposed to change the view or something that is infinitely looping I would guess

BjarnOP•2y ago

Yep it's not related to wrangler anyway, just happened with a normal prod build something edge related in this project.

James•2y ago

Oh so it's a Next.js issue then

BjarnOP•2y ago

yup this is thank god haha getting closer again

James•2y ago

Not my fault this time 😅

BjarnOP•2y ago

hehe nope! still have to debug that dynamic/lazy import issue, but this has a bit more priority sadly

James•2y ago

Understandable

BjarnOP•2y ago

wow I... might've fixed it

James•2y ago

BjarnOP•2y ago

In my onSuccess of the login call, I added the "revalidateAll" call in a startTransition:

      const from =
        searchParams?.get("from") ??
        (getCookie("redirect") as string | undefined) ??
        undefined;

      deleteCookie("redirect");

      // @ts-expect-error is valid
      startTransition(() => revalidateAll());

      // @ts-expect-error dynamic redirect
      router.push(from ?? "/");

      const from =
        searchParams?.get("from") ??
        (getCookie("redirect") as string | undefined) ??
        undefined;

      deleteCookie("redirect");

      // @ts-expect-error is valid
      startTransition(() => revalidateAll());

      // @ts-expect-error dynamic redirect
      router.push(from ?? "/");

the revalidateAll call is just an alias to revalidatePath("<internal api prefix>") invalidating all caches but it's weird, as I don't have this issue with node + I have next.revalidate = 0 on all calls and for client side calls, also cache = no-store as this isn't supported on CF Pages so weird testing with wrangler now, at least it worked with a normal prod build unbelievable, it works... 😮

James•2y ago

fwiw, you'll probably see fetch errors when using revalidatePath because it is supposed to call revalidateTag which by default in the edge runtime sends fetch requests to an URL that only exists in vercel deployments

BjarnOP•2y ago

oh for real? lovely, gotta love Vercel

James•2y ago

imo it's kinda goofy with how that whole thing is implemented

BjarnOP•2y ago

(I don't really like them fyi lolsob

James•2y ago

😉

BjarnOP•2y ago

yea it seems like it let's just say; in my 10 year's of hosting stuff, I've never had so much downtime in the 4 month period I was a paid customer.

James•2y ago

If you are using revalidatePath for cache revalidation instead of server actions, that'll have precisely zero effect, because we can't revalidate paths, because that depends on rerunning the nodejs lambda prerender functions which we, obviously, can't run and therefore discard in favor of the prerendered static versions

BjarnOP•2y ago

Reason why I really want to use CF pages, it just sounds perfect

James•2y ago

If you use it in server actions for the server action functionality, well, you'll probably run into that fetch error. I absolutely hate that by the way

BjarnOP•2y ago

ahh no server actions for me

James•2y ago

They should NOT have used the cache revalidation utility for server action responses ¯\_(ツ)_/¯

BjarnOP•2y ago

what, I'm so confused 😂 this thing makes me think they want you locked in on Vercel

James•2y ago

Oh right so basically they are adding server actions to the app directory, and if you call revalidatePath in the server action it prevents you from needing to do two round trips and returns the updated page straight away instead of you needing to refresh the rsc tree or whatever afterwards. At least that's how I understand things based on what I've read. But revalidatePath is the utility dedicated to cache revalidation of pages, so they should have used a separate utility. Anyways that's just a personal annoyance, no worries The only point that matters was if you are using revalidatePath solely to trigger a revalidation of your cached pages, nothing will happen on Pages

BjarnOP•2y ago

Interesting, haven't really looked into it yet haha no worries, I understand it lol So weird, but, using wrangler pages dev mimics this right?

James•2y ago

Not sure what you mean?

BjarnOP•2y ago

As in, it uses the actual runtime Pages also uses, so revalidating locally with wrangler dev acts the same as it will on Pages? btw, offtopic again: are there any known "bigger" web apps hosting nextjs on CF Pages already? Gives me hope everything will eventually work out if I just keep going 😂

James•2y ago

So what revalidatePath actually does on Vercel is it sends an API request that triggers an invocation of the prerender lambda function that they generated for the route. We are unable to use those lambda functions because they're for nodejs. So, instead, at build time, we discard those prerender functions and use the fallback static assets that would be served by default until the next revalidation was triggered. So there is nothing for revalidatePath to invoke when using next-on-pages Wrangler v3 uses Miniflare v3 which uses workerd, which is the workers runtime

BjarnOP•2y ago

Ahhh I see Check, pretty cool actually

James•2y ago

I'm not really sure what apps there are out there using next-on-pages, and we only hit v1 a few weeks ago, so I would imagine it's kinda a little too recent for huge apps to even finish a migration from wherever they are with nodejs to Pages with the edge runtime We have plenty of test apps we try out though 🙂 The biggest issue I see with people migrating over is the use of dependencies that leverage nodejs stuff without people necessarily realising, or some kind of edge case that needs special handling I've always used the edge runtime when working with nextjs, so ive always been used to writing apps designed to work with the edge runtime, but a lot of people have never looked at that side of next before so it can be challenging

BjarnOP•2y ago

Understandable haha, I like living on the edge, but I was starting to think I might be a bit too soon, but, I started rewriting this redesign using App Router and also tried making sure it's compatible with Edge runtime. But some hickups still here and there Can confirm it's a challenge haha

James•2y ago

Yeah using app router is definitely a good idea. pages directory is kinda iffy with the edge runtime

BjarnOP•2y ago

Yea, my marketing page still is Pages, but it's static, so runs fine on Pages, not using static export tho and holy sh, after deploying that startTransition fix, it works I can log in fine, all pages so far look alright

James•2y ago

That's great! 😄

BjarnOP•2y ago

but indeed, the places where I use the revalidatePath calls don't actually rerender, like expected after you told me not sure why it fixed the login flow tho, probably just something to do with the cookies passed through the headers or something? I hate it when I don't know why a solution works haha, but I'll let it rest while I fix the rest

James•2y ago

some weird dark magic

BjarnOP•2y ago

<a:magic_hands:770005194440048701>

BjarnOP•2y ago

Back to the original issue btw: I found this discussion: https://community.cloudflare.com/t/dymanamic-expressions-in-import-statement/408950 Can it be related to mine too?

Cloudflare Community

Dymanamic expressions in import() statement

I have an import statement with a dynamic expression in my code running on a worker: await import(./…/…/src/${component}) This results in the error: TypeError: A dynamic import callback was not specified. This surprised me, as this behavior is supported in Webpack (webpack docs → Module Methods → Dynamic expressions in import()) Is there ...

BjarnOP•2y ago

Building locally with next-on-pages and then running wrangler pages dev works. So I guess it's something remote that's going wrong with Pages after building (cc @walshydev)

James•2y ago

we use dynamic imports for routes that generate functions, so i highly doubt it

BjarnOP•2y ago

ah check

James•2y ago

i think it's probably something to do with how nextjs handles lazy loaded components when running their node server vs vercel's build output, but i dont know what that something is

James•2y ago

this case probably has something to do with this message on the nextjs docs

BjarnOP•2y ago

oh interesting that is

James•2y ago

and i just realised that the issue you linked about dynamic imports also uses template literals. we don't use template literals with our dynamic imports, just the explicit path that is passed to the function. not sure how much of a difference that makes as far as that issue was concerned, but yeah i dont see anything in the react lazy() docs about an import path being explicit but perhaps the same warning as in the nextjs dynamic() docs applies there as well Give it a go again with an explicit path written in the import for the lazy loaded component instead of template literals and see what happens i guess 😛

BjarnOP•2y ago

Indeed that'll make sense will give it a shot tomorrow oh wait a sec I was trying out a different way, not using dynamic import. Just for the sake of testing this is really interesting so, I know do this:

  const Flag = flags[countryCode];

  return <Flag className={className} />;

  const Flag = flags[countryCode];

  return <Flag className={className} />;

and flags is an object looking like this:

import SvgZw from "app/_assets/svg/flags/Zw";

const flags: { [key: string]: ElementType } = {
  ad: SvgAd,

import SvgZw from "app/_assets/svg/flags/Zw";

const flags: { [key: string]: ElementType } = {
  ad: SvgAd,

where every single flag is imported statically not the way to go, but just for the sake of testing and it failed to deploy the worker deploy succesfull, but no functions/worker

BjarnOP•2y ago

fun fact: I do this somewhere else, I have a map for a dropdown to select locations and just added the icon as ElementType prop to that object:

BjarnOP•2y ago

Here, it works fine. I am starting to think all these flags (they're just SVG components generated using svgr/cli) are too much for Pages as in, it compiles valid, but it are over hundreds of them and something goes wrong there

James•2y ago

It's possible that those hundreds of flags are being really chonky when added up and taking a heck of a lot of space perhaps

BjarnOP•2y ago

yep I guess so I also have an icon pack implemented the same way (not with a component like CountryFlag, but just importing the icons like SvgArrowLeft for example. There're more of those than there're flags

James•2y ago

if you ran it locally i take it it worked though?

BjarnOP•2y ago

yep! exact command: wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat

James•2y ago

i guess it's probably too large to be deployed then, hence no worker etc. found

BjarnOP•2y ago

I guess, weird it's succeeding

James•2y ago

¯\_(ツ)_/¯

BjarnOP•2y ago

Do you know by any chance if there's documentation on these limits? Will check those out first then

James•2y ago

Well, Pages uses KV and the KV size limit is 25mb, so my assumptions with the _worker.js directory so far have been that the contents in it can total up to 25mb, but it's hard to know for sure how it works since there's no documentation for the _worker.js directory

BjarnOP•2y ago

ah check, got ya

BjarnOP•2y ago

It's been running smooth since the weekend 🙂 Though I'd like to share some performance charts, always find those interesting myself haha https://twitter.com/BjarnBronsveld/status/1671072680060108801

Bjarn Bronsveld (@BjarnBronsveld)

You wouldn't be able to guess when I moved @spectate_hq's web app to @Cloudflare Pages 🤯 Written in @nextjs, fully compatible with Edge runtime. No more NodeJS.

Twitter

BjarnOP•2y ago

I haven't looked into the Flag component issue yet, I let it go for now, it was a very, very minor design addition that I have postponed for now I don't think I should mark this thread as solved tho, as it's still unclear why it's not deploying functions when there're too many files (I guess that might be the issue, now I think about it, testing it out with less flag svg's might work if that's the case)

Walshy•2y ago

James•2y ago

Glad to hear things are running okay! I haven't actually tried reproing the lazy loading issue yet (been busy with life stuff 🙈) but I gotta try that out soon

BjarnOP•2y ago

Haha no worries! If I've a free evening I'll get a reproduction repo set up with that component, hopefully that breaks stuff (weird thing to say)

James•2y ago

Also if you try out the flag issue, see if you can get a list of the file sizes sorted by largest too, would be nice to see what sizes it's generating with them

BjarnOP•2y ago

Sure, will take a look at that!

Gaming

Programming

Pages not creating Worker, NextJS returns 404