Hello, I'm testing a Nextjs site with Cloudflare Pages Functions that relies on querystring params,

Mmshwery Hello, I'm testing a Nextjs site with Cloudflare Pages Functions that relies on ...

J

James•7/11/23, 8:28 PM

Hey there @mshwery, assuming you're using

@cloudflare/next-on-pages

@cloudflare/next-on-pages

, this is a bit of an oopsy on my part. Apologies about that.

Please can you try out the prerelease in this PR and let me know if things behave how you expect them to with it: https://github.com/cloudflare/next-on-pages/pull/380#issuecomment-1631463051

J

James•7/11/23, 9:01 PM

(if you tried the prerelease when i sent that message, i just pushed another change to the branch with a little fix, so please try the new prerelease)

JJames Hey there @mshwery, assuming you're using `@cloudflare/next-on-pages`, this is a...

M

mshweryOP•7/11/23, 11:41 PM

Hi @Better James – yes, I believe

@cloudflare/next-on-pages

@cloudflare/next-on-pages

is what's being used under the hood (it's a bit opaque, but I see that in the docs and in node_modules). Will test out the new release, thank you!

E

ejcx•7/12/23, 3:54 AM

Am I doing something obviously wrong with my next pages deployment ?

I'm trying to get a function to run on

/mydir/asdf

/mydir/asdf

/mydir/asdf

/mydir/asdf and it doesn't seem to be working. It's making a fetch upstream and I don't see that fetch upstream, and I also don't see anything in the UI indicating I uploaded a function in my project

.
├── README.md
├── functions
│   └── mydir
│       └── [[index]].js

.
├── README.md
├── functions
│   └── mydir
│       └── [[index]].js

.
├── README.md
├── functions
│   └── mydir
│       └── [[index]].js

.
├── README.md
├── functions
│   └── mydir
│       └── [[index]].js

Eejcx Am I doing something obviously wrong with my next pages deployment ? I'm trying...

J

James•7/12/23, 4:43 AM

How did you upload your project? Dash? CI? Direct Upload?

E

ejcx•7/12/23, 4:58 AM

Im using the github app. I found in discord chat history that I needed to use something different since it's a next project. Now I'm getting a 500

Internal Server Error

Internal Server Error

Internal Server Error

Internal Server Error

E

ejcx•7/12/23, 5:00 AM

Now I see my edge function listed in the build logs but still don't see it under the "Functions" tab.

23:52:33.020    ⚡️ Edge Function Routes (1)
23:52:33.020    ⚡️   - /api/api

23:52:33.020    ⚡️ Edge Function Routes (1)
23:52:33.020    ⚡️   - /api/api

23:52:33.020    ⚡️ Edge Function Routes (1)
23:52:33.020    ⚡️   - /api/api

23:52:33.020    ⚡️ Edge Function Routes (1)
23:52:33.020    ⚡️   - /api/api

Eejcx Now I see my edge function listed in the build logs but still don't see it under...

J

James•7/12/23, 8:30 AM

Hey there, I can see from the log message that you are using

@cloudflare/next-on-pages

@cloudflare/next-on-pages

. In the build tool, we don't support the functions directory. This is because we generate our own worker at the end which is used to power your site instead. You won't see a list of routes in the Functions tab.

When using Next.js with next-on-pages, you should be using Next.js API routes instead of trying to use the functions directory. These will then get built by Next.js and we are able to include them in the final worker that we generate, and any edge runtime routes in your Next.js will appear in the build summary that we log, like the one that you pasted here.

JJames Hey there, I can see from the log message that you are using `@cloudflare/next-o...

E

ejcx•7/12/23, 2:10 PM

Yeah I ended up finding that in this channel by searching ^, thanks for getting back to me. I tried the edge app router functions but they didn't work when I tried the basic helloworld, and I got an internal server error after quite a few tries.

Eejcx Yeah I ended up finding that in this channel by searching ^, thanks for getting ...

J

James•7/12/23, 2:11 PM

Are you able to share exactly what code you used, or even better, a link to a repo?

B

boywonder350•7/12/23, 5:36 PM

How do I set up rate limiting for a pages function? I tried setting up a rate limit rule for my domain -> waf -> rate limits, but it is not working. Appreciate any and all help!

S

slowpoke•7/12/23, 7:43 PM

Kind of a silly Q but I'm trying to deploy a Solid-Start + AuthJS project to cloudflare pages. Everything works fine, but as part of the

functions/[[path]].js

functions/[[path]].js

functions/[[path]].js

functions/[[path]].js code it generates, AuthJS has:

function SolidAuth(config) {
    const { prefix = "/api/auth", ...authOptions } = config;
    authOptions.secret ??= process.env.AUTH_SECRET;
    ...

function SolidAuth(config) {
    const { prefix = "/api/auth", ...authOptions } = config;
    authOptions.secret ??= process.env.AUTH_SECRET;
    ...

function SolidAuth(config) {
    const { prefix = "/api/auth", ...authOptions } = config;
    authOptions.secret ??= process.env.AUTH_SECRET;
    ...

function SolidAuth(config) {
    const { prefix = "/api/auth", ...authOptions } = config;
    authOptions.secret ??= process.env.AUTH_SECRET;
    ...

This

process

process

process

process reference causes the following error during deployment:

Error: Failed to publish your Function. Got error: Uncaught ReferenceError: process is not defined

Error: Failed to publish your Function. Got error: Uncaught ReferenceError: process is not defined

Error: Failed to publish your Function. Got error: Uncaught ReferenceError: process is not defined

Error: Failed to publish your Function. Got error: Uncaught ReferenceError: process is not defined

I'm assuming this is because the environment Cloudflare runs functions in isn't Node necessarily? Or am I being silly and missing something simple. When running locally, it seems to use Miniflare and be fine but deployments of course don't work.

S

slowpoke•7/12/23, 7:44 PM

It seems like to me this library would need to be updated to support this, because similar code I've seen used in Qwik for instance passes environment variables as a function arg, not

process.env

process.env

process.env

process.env

B

brian•7/14/23, 7:22 PM

Has anyone used Zaraz with the HTTP Events API on Pages? The POST requests going to the configured Zaraz endpoint are appearing in my Pages log while Zaraz doesn't see anything...

B

brian•7/14/23, 7:23 PM

I'm wondering if Pages functions prevent use of that feature

R

Ray Hao•7/16/23, 2:51 AM

Is it possible to push functions logs to a R2 bucket with logpush?

V

valkyrie_pilot•7/16/23, 3:50 PM

TS newbie here... I installed a library called

oidc-client-ts

oidc-client-ts

oidc-client-ts

oidc-client-ts and am having problems with importing the actual types

Compiling worker to "/var/folders/kr/x026klkx43s4nscrbnb8m0g00000gn/T/functionsWorker-0.7333432776624138.mjs"...
✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.



✘ [ERROR] No matching export in "../node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js" for import "OidcClientSettings"

    login.ts:2:21:
      2 │ import { OidcClient, OidcClientSettings } from "oidc-client-ts";
        ╵                      ~~~~~~~~~~~~~~~~~~


✘ [ERROR] Build failed with 1 error:

  login.ts:2:21: ERROR: No matching export in
  "../node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js" for import "OidcClientSettings"

Compiling worker to "/var/folders/kr/x026klkx43s4nscrbnb8m0g00000gn/T/functionsWorker-0.7333432776624138.mjs"...
✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.



✘ [ERROR] No matching export in "../node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js" for import "OidcClientSettings"

    login.ts:2:21:
      2 │ import { OidcClient, OidcClientSettings } from "oidc-client-ts";
        ╵                      ~~~~~~~~~~~~~~~~~~


✘ [ERROR] Build failed with 1 error:

  login.ts:2:21: ERROR: No matching export in
  "../node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js" for import "OidcClientSettings"

Compiling worker to "/var/folders/kr/x026klkx43s4nscrbnb8m0g00000gn/T/functionsWorker-0.7333432776624138.mjs"...
✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.



✘ [ERROR] No matching export in "../node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js" for import "OidcClientSettings"

    login.ts:2:21:
      2 │ import { OidcClient, OidcClientSettings } from "oidc-client-ts";
        ╵                      ~~~~~~~~~~~~~~~~~~


✘ [ERROR] Build failed with 1 error:

  login.ts:2:21: ERROR: No matching export in
  "../node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js" for import "OidcClientSettings"

Compiling worker to "/var/folders/kr/x026klkx43s4nscrbnb8m0g00000gn/T/functionsWorker-0.7333432776624138.mjs"...
✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.



✘ [ERROR] No matching export in "../node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js" for import "OidcClientSettings"

    login.ts:2:21:
      2 │ import { OidcClient, OidcClientSettings } from "oidc-client-ts";
        ╵                      ~~~~~~~~~~~~~~~~~~


✘ [ERROR] Build failed with 1 error:

  login.ts:2:21: ERROR: No matching export in
  "../node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js" for import "OidcClientSettings"

I can't find any useful examples for actual TS in the repo, nor any simpler alternatives

J

James•7/16/23, 3:54 PM

You probably want

import type {OidcClientSettings} from 'oidc-client-ts';

import type {OidcClientSettings} from 'oidc-client-ts';

import type {OidcClientSettings} from 'oidc-client-ts';

import type {OidcClientSettings} from 'oidc-client-ts'; looking at how they build and export things

JJames You probably want `import type {OidcClientSettings} from 'oidc-client-ts';` look...

V

valkyrie_pilot•7/16/23, 3:59 PM

Oh... thank you very much'

V

valkyrie_pilot•7/16/23, 8:28 PM

I still get

Cannot find module 'oidc-client-ts'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

Cannot find module 'oidc-client-ts'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

Cannot find module 'oidc-client-ts'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

Cannot find module 'oidc-client-ts'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

J

James•7/16/23, 8:42 PM

I'd recommend sharing a minimal reproducible example on GitHub or something at this point, and maybe starting a thread in #pages-help - this seems like a more generic TypeScript environment issue than anything to do directly with Pages

JJames I'd recommend sharing a minimal reproducible example on GitHub or something at t...

V

valkyrie_pilot•7/16/23, 8:59 PM

yeah, it is, as i just realized wrangler builds it fine, but VSCode is complaining. Unfortunately, i don't actually know any JS/TS help servers.

V

valkyrie_pilot•7/16/23, 9:20 PM

thank you!

K

Keavon•7/17/23, 11:09 PM

Using a hybrid static site generator + dynamic SSR approach via CF Pages and worker functions, probably generated with SvelteKit, is there a way to generate static versions of most pages which have a "Sign In" button in the top left of the page, but then when the user is actually logged in, switch to serving a dynamic SSR version showing their username in the top right instead of serving the static HTML page? It seems like this might not be possible (since the CF edge can't tell if the user is logged in before touching a Worker) but I just want to check if there's any option for this without just serving all pages with Workers.

KKeavon Using a hybrid static site generator + dynamic SSR approach via CF Pages and wor...

D

Dahoom•7/18/23, 1:27 AM

My idea probably isn't the best but you could try to detect if the user has a JWT or something, and if so it sends a post request to a +server.ts file which attempts to authenticate it

D

Dahoom•7/18/23, 1:28 AM

Make sure you sanitize the token before attempting to authenticate

KKeavon Using a hybrid static site generator + dynamic SSR approach via CF Pages and wor...

D

Dahoom•7/18/23, 1:32 AM

But overall I suggest you skip the headache and just keep it all on cloudflare workers, it's only 0.5$/mil and it's not worth going through all these hoops which can potentially make the user experience worse. If you're scared of users infinitly reloading you can add rate limiting through WAF or create your own implementation

D

Dahoom•7/18/23, 1:34 AM

I went through the same thought process and decided it's not worth the hassle since for every page except for any docs you have you will have to run a serverside check to see if the user is logged in/valid, so why not just make the page all 1 worker function since it's already going to use a call anyways

B

brian•7/18/23, 11:40 AM

Is there some kind of "pass through" for Pages Functions that would allow me to get a request to the Zaraz HTTP endpoint?

W

Walshy•7/18/23, 1:26 PM

What do you mean?

W

Walshy•7/18/23, 1:27 PM

Could you not just fetch it?

B

brian•7/18/23, 3:31 PM

I am, but the request isn't reaching Zaraz. It's hitting functions again (the POST request shows in the log)

B

brian•7/18/23, 3:32 PM

in

_middleware.ts

_middleware.ts

_middleware.ts

_middleware.ts, I'm running this:

async function pageview(request: Request) {
  let ip = request.headers.get("cf-connecting-ip");
  let useragent = request.headers.get("user-agent");
  let referrer = request.headers.get("referer");
  let url = request.url;

  let body = {
    "events": [
      {
        "client": {
          "__zarazTrack": "Pageview",
        },
        "system": {
          "device": {
            "ip": ip,
            "user-agent": useragent,
          },
          "page": {
            "url": url,
            "referrer": referrer
          },
        },
      },
    ]
  };

  return fetch(new URL("<zaraz endpoint>", url), {
    method: "POST",
    body: JSON.stringify(body),
  });
}

async function pageview(request: Request) {
  let ip = request.headers.get("cf-connecting-ip");
  let useragent = request.headers.get("user-agent");
  let referrer = request.headers.get("referer");
  let url = request.url;

  let body = {
    "events": [
      {
        "client": {
          "__zarazTrack": "Pageview",
        },
        "system": {
          "device": {
            "ip": ip,
            "user-agent": useragent,
          },
          "page": {
            "url": url,
            "referrer": referrer
          },
        },
      },
    ]
  };

  return fetch(new URL("<zaraz endpoint>", url), {
    method: "POST",
    body: JSON.stringify(body),
  });
}

async function pageview(request: Request) {
  let ip = request.headers.get("cf-connecting-ip");
  let useragent = request.headers.get("user-agent");
  let referrer = request.headers.get("referer");
  let url = request.url;

  let body = {
    "events": [
      {
        "client": {
          "__zarazTrack": "Pageview",
        },
        "system": {
          "device": {
            "ip": ip,
            "user-agent": useragent,
          },
          "page": {
            "url": url,
            "referrer": referrer
          },
        },
      },
    ]
  };

  return fetch(new URL("<zaraz endpoint>", url), {
    method: "POST",
    body: JSON.stringify(body),
  });
}

async function pageview(request: Request) {
  let ip = request.headers.get("cf-connecting-ip");
  let useragent = request.headers.get("user-agent");
  let referrer = request.headers.get("referer");
  let url = request.url;

  let body = {
    "events": [
      {
        "client": {
          "__zarazTrack": "Pageview",
        },
        "system": {
          "device": {
            "ip": ip,
            "user-agent": useragent,
          },
          "page": {
            "url": url,
            "referrer": referrer
          },
        },
      },
    ]
  };

  return fetch(new URL("<zaraz endpoint>", url), {
    method: "POST",
    body: JSON.stringify(body),
  });
}

B

brian•7/18/23, 3:34 PM

that endpoint is what I have configured here

B

brian•7/18/23, 3:36 PM

it seems like Pages Functions is receiving the request, but there is no asset or function for the path I chose. Zaraz doesn't see the request

B

brian•7/18/23, 4:04 PM

("solved" over in #zaraz with a temporary solution until the Zaraz API can be contacted within its zone: zaraz)

C

Cryptic Jack•7/19/23, 4:21 AM

could someone help me with getting local dev with wragler working perhaps?

C

Cryptic Jack•7/19/23, 4:22 AM

i have the form action set and method

method="POST" action="/api/submit.js"

method="POST" action="/api/submit.js"

method="POST" action="/api/submit.js"

method="POST" action="/api/submit.js"

C

Cryptic Jack•7/19/23, 4:22 AM

C

Cryptic Jack•7/19/23, 4:23 AM

Compiling worker to "/tmp/functionsWorker-0.13974737188549957.mjs"...
▲ [WARNING] No routes found when building Functions directory: ./functions - skipping

Compiling worker to "/tmp/functionsWorker-0.13974737188549957.mjs"...
▲ [WARNING] No routes found when building Functions directory: ./functions - skipping

Compiling worker to "/tmp/functionsWorker-0.13974737188549957.mjs"...
▲ [WARNING] No routes found when building Functions directory: ./functions - skipping

Compiling worker to "/tmp/functionsWorker-0.13974737188549957.mjs"...
▲ [WARNING] No routes found when building Functions directory: ./functions - skipping

C

Cryptic Jack•7/19/23, 4:23 AM

i get this error

C

Cryptic Jack•7/19/23, 4:23 AM

this is the command

C

Cryptic Jack•7/19/23, 4:23 AM

npx wrangler pages --proxy 3333 dev --local -- gatsby develop

npx wrangler pages --proxy 3333 dev --local -- gatsby develop

npx wrangler pages --proxy 3333 dev --local -- gatsby develop

npx wrangler pages --proxy 3333 dev --local -- gatsby develop

C

Cryptic Jack•7/19/23, 6:12 AM

i figured it out

Hello, I'm testing a Nextjs site with Cloudflare Pages Functions that relies on querystring params,

Similar Threads

Similar Threads

Similar Threads