Do functions not work locally or am i doing something wrong

Ttitanic_Do functions not work locally or am i doing something wrong

R

RyanD•9/19/23, 4:14 PM

they work locally

T

titanic_OP•9/19/23, 5:11 PM

i was running the command from

c:\users\[user]\

c:\users\[user]\

, just needed to cd to

\github\[repo]\

\github\[repo]\

and run it from there

L

lerela•9/21/23, 6:32 AM

Hello, I enabled functions and Static Forms Pages Plugin. Now Cloudflare rewrites the Javascript in my static assets (replacing

.innerHTML="<form></form><form></form>"

.innerHTML="<form></form><form></form>"

by

.innerHTML="<form method="POST"><input type="hidden" name="static-form-name" value="null" /></form><form method="POST"><input type="hidden" name="static-form-name" value="null" /></form>"

.innerHTML="<form method="POST"><input type="hidden" name="static-form-name" value="null" /></form><form method="POST"><input type="hidden" name="static-form-name" value="null" /></form>"

.innerHTML="<form method="POST"><input type="hidden" name="static-form-name" value="null" /></form><form method="POST"><input type="hidden" name="static-form-name" value="null" /></form>"

.innerHTML="<form method="POST"><input type="hidden" name="static-form-name" value="null" /></form><form method="POST"><input type="hidden" name="static-form-name" value="null" /></form>"

). Obviously this breaks the JS + the computation of the integrity hash, and I don’t see the point of this rewrite as this file is completely unrelated to functions. Is there a config flag I missed?

C

charelf•9/23/23, 9:13 AM

I have a CF page and Im stuck. In one of my pages functions, I do:

import { jsPDF } from 'jspdf'

import { jsPDF } from 'jspdf'

and I ran

npm install jspdf

npm install jspdf

and my page function works fine locally. My package.json also mentions this dependency. But when I push to my github to deploy, I see in the cloudflare dashboard

ERROR] Build failed with 1 error:

ERROR] Build failed with 1 error:

and

pdfmaker.js:1:22: ERROR: Could not resolve "jspdf"

pdfmaker.js:1:22: ERROR: Could not resolve "jspdf"

did i miss some simple step? how can i get this external dependcy in production?

C

charelf•9/23/23, 9:13 AM

the logs also mention

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

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

but im not sure how to do this

C

charelf•9/23/23, 9:31 AM

I added the

nodejs_compat

nodejs_compat

flag to the pages > functions > compatibility flags, but it doesnt work...

could it be because i gitignore

node_modules

node_modules

?

C

charelf•9/23/23, 9:32 AM

is there any tutorial on how to use cloudflare page functions where a function has an external NPM dependency, but without using a framework like react/angular/ ...?

Ccharelf I added the `nodejs_compat` flag to the pages > functions > compatibility flags,...

H

Hello, I’m Allie!•9/23/23, 9:39 AM

Do you see the build log showing that it runs an install?

C

charelf•9/23/23, 10:00 AM

i dont see an install. here is the complete build log

3:08:10.954    Cloning repository...
23:08:12.065    From https://github.com/charelF/wg-form-page
23:08:12.065     * branch            bf14b72070afb75b1b8c4a5e13d5caa3b7aea792 -> FETCH_HEAD
23:08:12.066    
23:08:12.110    HEAD is now at bf14b72 nice
23:08:12.111    
23:08:12.219    
23:08:12.252    Success: Finished cloning repository files
23:08:12.979    No build command specified. Skipping build step.
23:08:12.980    Found Functions directory at /functions. Uploading.
23:08:14.565    ✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
23:08:14.566    
23:08:14.566    
23:08:14.569    
23:08:14.570    ✘ [ERROR] Could not resolve "jspdf"
23:08:14.571    
23:08:14.571        pdfmaker.js:1:22:
23:08:14.571          1 │ import { jsPDF } from 'jspdf'
23:08:14.571            ╵                       ~~~~~~~
23:08:14.571    
23:08:14.571      You can mark the path "jspdf" as external to exclude it from the bundle, which will remove this error.
23:08:14.572    
23:08:14.572    
23:08:14.575    ✘ [ERROR] Build failed with 1 error:
23:08:14.575    
23:08:14.575      pdfmaker.js:1:22: ERROR: Could not resolve "jspdf"
23:08:14.575    
23:08:14.575    
23:08:14.585    Failed building Pages Functions.
23:08:15.476    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

3:08:10.954    Cloning repository...
23:08:12.065    From https://github.com/charelF/wg-form-page
23:08:12.065     * branch            bf14b72070afb75b1b8c4a5e13d5caa3b7aea792 -> FETCH_HEAD
23:08:12.066    
23:08:12.110    HEAD is now at bf14b72 nice
23:08:12.111    
23:08:12.219    
23:08:12.252    Success: Finished cloning repository files
23:08:12.979    No build command specified. Skipping build step.
23:08:12.980    Found Functions directory at /functions. Uploading.
23:08:14.565    ✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
23:08:14.566    
23:08:14.566    
23:08:14.569    
23:08:14.570    ✘ [ERROR] Could not resolve "jspdf"
23:08:14.571    
23:08:14.571        pdfmaker.js:1:22:
23:08:14.571          1 │ import { jsPDF } from 'jspdf'
23:08:14.571            ╵                       ~~~~~~~
23:08:14.571    
23:08:14.571      You can mark the path "jspdf" as external to exclude it from the bundle, which will remove this error.
23:08:14.572    
23:08:14.572    
23:08:14.575    ✘ [ERROR] Build failed with 1 error:
23:08:14.575    
23:08:14.575      pdfmaker.js:1:22: ERROR: Could not resolve "jspdf"
23:08:14.575    
23:08:14.575    
23:08:14.585    Failed building Pages Functions.
23:08:15.476    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

3:08:10.954    Cloning repository...
23:08:12.065    From https://github.com/charelF/wg-form-page
23:08:12.065     * branch            bf14b72070afb75b1b8c4a5e13d5caa3b7aea792 -> FETCH_HEAD
23:08:12.066    
23:08:12.110    HEAD is now at bf14b72 nice
23:08:12.111    
23:08:12.219    
23:08:12.252    Success: Finished cloning repository files
23:08:12.979    No build command specified. Skipping build step.
23:08:12.980    Found Functions directory at /functions. Uploading.
23:08:14.565    ✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
23:08:14.566    
23:08:14.566    
23:08:14.569    
23:08:14.570    ✘ [ERROR] Could not resolve "jspdf"
23:08:14.571    
23:08:14.571        pdfmaker.js:1:22:
23:08:14.571          1 │ import { jsPDF } from 'jspdf'
23:08:14.571            ╵                       ~~~~~~~
23:08:14.571    
23:08:14.571      You can mark the path "jspdf" as external to exclude it from the bundle, which will remove this error.
23:08:14.572    
23:08:14.572    
23:08:14.575    ✘ [ERROR] Build failed with 1 error:
23:08:14.575    
23:08:14.575      pdfmaker.js:1:22: ERROR: Could not resolve "jspdf"
23:08:14.575    
23:08:14.575    
23:08:14.585    Failed building Pages Functions.
23:08:15.476    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

3:08:10.954    Cloning repository...
23:08:12.065    From https://github.com/charelF/wg-form-page
23:08:12.065     * branch            bf14b72070afb75b1b8c4a5e13d5caa3b7aea792 -> FETCH_HEAD
23:08:12.066    
23:08:12.110    HEAD is now at bf14b72 nice
23:08:12.111    
23:08:12.219    
23:08:12.252    Success: Finished cloning repository files
23:08:12.979    No build command specified. Skipping build step.
23:08:12.980    Found Functions directory at /functions. Uploading.
23:08:14.565    ✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
23:08:14.566    
23:08:14.566    
23:08:14.569    
23:08:14.570    ✘ [ERROR] Could not resolve "jspdf"
23:08:14.571    
23:08:14.571        pdfmaker.js:1:22:
23:08:14.571          1 │ import { jsPDF } from 'jspdf'
23:08:14.571            ╵                       ~~~~~~~
23:08:14.571    
23:08:14.571      You can mark the path "jspdf" as external to exclude it from the bundle, which will remove this error.
23:08:14.572    
23:08:14.572    
23:08:14.575    ✘ [ERROR] Build failed with 1 error:
23:08:14.575    
23:08:14.575      pdfmaker.js:1:22: ERROR: Could not resolve "jspdf"
23:08:14.575    
23:08:14.575    
23:08:14.585    Failed building Pages Functions.
23:08:15.476    Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

C

charelf•9/23/23, 10:01 AM

it probably should run an install, but I cant find out how to make it do so

C

charelf•9/23/23, 10:02 AM

given that my package.json mentions the dependency, i would have expect the install to work automatically, at least this is how I recall it being with cf workers

C

charelf•9/23/23, 10:03 AM

my build command in the function configuarion is empty, as this page mentions to leave it empty (https://developers.cloudflare.com/pages/platform/build-configuration/)

C

charelf•9/23/23, 10:06 AM

these are my build settings

Ccharelf given that my package.json mentions the dependency, i would have expect the inst...

H

Hello, I’m Allie!•9/23/23, 10:12 AM

Do you have a lockfile committed?

H

Hello, I’m Allie!•9/23/23, 10:12 AM

package-lock.json

package-lock.json

,

pnpm-lock.yaml

pnpm-lock.yaml

,

yarn.lock

yarn.lock

, etc.

C

charelf•9/23/23, 10:13 AM

yes its commited

C

charelf•9/23/23, 10:13 AM

it starts with

{
  "name": "wg-form-page",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "jspdf": "^2.5.1"
      }
    },

{
  "name": "wg-form-page",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "jspdf": "^2.5.1"
      }
    },

{
  "name": "wg-form-page",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "jspdf": "^2.5.1"
      }
    },

{
  "name": "wg-form-page",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "jspdf": "^2.5.1"
      }
    },

Ccharelf it starts with ``` { "name": "wg-form-page", "lockfileVersion": 3, "requ...

H

Hello, I’m Allie!•9/23/23, 10:15 AM

Try setting your Build Command to

echo "Hello World!"

echo "Hello World!"

H

Hello, I’m Allie!•9/23/23, 10:15 AM

I'm wondering if it only triggers an install when there is a build command...

C

charelf•9/23/23, 10:15 AM

I really appreciate your help. I made my repo public in case you want to take a quick look

https://github.com/charelF/wg-form-page

ill try that

C

charelf•9/23/23, 10:16 AM

that worked!

C

charelf•9/23/23, 10:16 AM

really weird, but deployment worked now

C

charelf•9/23/23, 10:17 AM

thanks a lot, have a nice day!

Ccharelf thanks a lot, have a nice day!

H

Hello, I’m Allie!•9/23/23, 10:18 AM

You too!

Ccharelf thanks a lot, have a nice day!

H

Hello, I’m Allie!•9/23/23, 10:21 AM

Made an issue for it, so hopefully that should get ironed out...

GitHub

Build Command when using Functions · Issue #10841 · cloudflare/clou...

Which Cloudflare product does this pertain to? Pages Existing documentation URL(s) Framework Presets What changes are you suggesting? Currently, the framework presets section notes that If you are ...

C

charelf•9/24/23, 9:54 AM

what specifically are you looking for? because cf page functions are similar to workers, so you could probably do some minimum changes to the worker and have it work as page function

C

charelf•9/24/23, 9:56 AM

but one thing this older worker tutorials have is to send back html, like this one aswell: https://workers.cloudflare.com/built-with/projects/lazy-invoice/

but im wondering, if i am building this with page functions, it looks more elegant to me to define the html as a static page and then import/insert/.. the dynamic functionality via a page function

C

charelf•9/24/23, 9:56 AM

and i am curious if there is a good readup on this

JJustinNoel 1) I don't believe so 2) The functions directory should be in the root path of t...

I

IanVS•9/25/23, 2:55 PM

I need to keep my functions directory in a subfolder due to my app's deployment strategy. It's been mostly working fine for me with a few hacky workarounds, except I can't run

npx wrangler pages dev

npx wrangler pages dev

without creating a symlink in the project root. It really would be excellent if the location of the

functions

functions

directory could be configurable.

A

adrwh•9/26/23, 1:10 PM

Hey people, hopefully a super quick question. In a Cloudflare pages application, where do i run the

npm install @cloudflare/pages-plugin-mailchannels

npm install @cloudflare/pages-plugin-mailchannels

. Do i run that inside the

/functions

/functions

folder or in the

application folder?

.
├── README.md
├── _headers.txt
├── functions
│   ├── _middleware.ts
│   └── tsconfig.json
├── index.html
└── style.css

.
├── README.md
├── _headers.txt
├── functions
│   ├── _middleware.ts
│   └── tsconfig.json
├── index.html
└── style.css

.
├── README.md
├── _headers.txt
├── functions
│   ├── _middleware.ts
│   └── tsconfig.json
├── index.html
└── style.css

.
├── README.md
├── _headers.txt
├── functions
│   ├── _middleware.ts
│   └── tsconfig.json
├── index.html
└── style.css

Specifically, I am wanting to use the

MailChannels

MailChannels

(

https://developers.cloudflare.com/pages/platform/functions/plugins/mailchannels/

https://developers.cloudflare.com/pages/platform/functions/plugins/mailchannels/

) plugin.

Aadrwh Hey people, hopefully a super quick question. In a Cloudflare pages application...

H

Hello, I’m Allie!•9/26/23, 2:13 PM

In the application folder

A

adrwh•9/26/23, 3:56 PM

Thank you @HardAtWork that is extremely helpful. Now when i commit and push the code to github, i see this error in the build logs in Cloudflare.

10:22:57.446    Found Functions directory at /functions. Uploading.
10:22:58.921    ✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
10:22:58.922    
10:22:58.922    
10:22:58.925    
10:22:58.927    ✘ [ERROR] Could not resolve "@cloudflare/pages-plugin-mailchannels"
10:22:58.927    
10:22:58.927        _middleware.ts:1:31:
10:22:58.927          1 │ ...rt mailChannelsPlugin from "@cloudflare/pages-plugin-mailchannels";
10:22:58.927            ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

10:22:57.446    Found Functions directory at /functions. Uploading.
10:22:58.921    ✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
10:22:58.922    
10:22:58.922    
10:22:58.925    
10:22:58.927    ✘ [ERROR] Could not resolve "@cloudflare/pages-plugin-mailchannels"
10:22:58.927    
10:22:58.927        _middleware.ts:1:31:
10:22:58.927          1 │ ...rt mailChannelsPlugin from "@cloudflare/pages-plugin-mailchannels";
10:22:58.927            ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

10:22:57.446    Found Functions directory at /functions. Uploading.
10:22:58.921    ✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
10:22:58.922    
10:22:58.922    
10:22:58.925    
10:22:58.927    ✘ [ERROR] Could not resolve "@cloudflare/pages-plugin-mailchannels"
10:22:58.927    
10:22:58.927        _middleware.ts:1:31:
10:22:58.927          1 │ ...rt mailChannelsPlugin from "@cloudflare/pages-plugin-mailchannels";
10:22:58.927            ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

10:22:57.446    Found Functions directory at /functions. Uploading.
10:22:58.921    ✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
10:22:58.922    
10:22:58.922    
10:22:58.925    
10:22:58.927    ✘ [ERROR] Could not resolve "@cloudflare/pages-plugin-mailchannels"
10:22:58.927    
10:22:58.927        _middleware.ts:1:31:
10:22:58.927          1 │ ...rt mailChannelsPlugin from "@cloudflare/pages-plugin-mailchannels";
10:22:58.927            ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I have the node_modules in .gitignore, so that are not being pushed into Github, is that the problem?

Aadrwh Thank you @HardAtWork that is extremely helpful. Now when i commit and push th...

H

Hello, I’m Allie!•9/26/23, 4:02 PM

No, that shouldn't be it. Do you see in the logs that Pages is installing your dependencies?

HHello, I’m Allie!No, that shouldn't be it. Do you see in the logs that Pages is installing your d...

A

adrwh•9/26/23, 4:37 PM

No it's not installing the dependencies, there are no logs to indicate that. It's just the above. It detects that there is a

/functions

/functions

folder, then produce the erros following that.

Aadrwh No it's not installing the dependencies, there are no logs to indicate that. It...

H

Hello, I’m Allie!•9/26/23, 4:45 PM

Have you committed a lockfile?

HHello, I’m Allie!Have you committed a lockfile?

A

adrwh•9/26/23, 4:48 PM

Yes there is a

package-lock.json

package-lock.json

commited and in GitHub.

HHello, I’m Allie!Have you committed a lockfile?

A

adrwh•9/26/23, 4:50 PM

here

Q

QuaqSim•9/26/23, 4:55 PM

Just to be sure, does it contain mailchannels (

grep mailchannels package-lock.json

grep mailchannels package-lock.json

) and did you add and commit (and push obviously) that change?

QQuaqSim Just to be sure, does it contain mailchannels (`grep mailchannels package-lock.j...

A

adrwh•9/26/23, 6:32 PM

It does include mailchannels, and its definitely commited and pushed into github.

{
  "name": "nnn",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "@cloudflare/pages-plugin-mailchannels": "^0.1.2",
        "@cloudflare/workers-types": "^4.20230922.0"
      }
    },
    "node_modules/@cloudflare/pages-plugin-mailchannels": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@cloudflare/pages-plugin-mailchannels/-/pages-plugin-mailchannels-0.1.2.tgz",
    },
    "node_modules/@cloudflare/workers-types": {
      "version": "4.20230922.0",
      "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230922.0.tgz",
    }
  }
}

{
  "name": "nnn",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "@cloudflare/pages-plugin-mailchannels": "^0.1.2",
        "@cloudflare/workers-types": "^4.20230922.0"
      }
    },
    "node_modules/@cloudflare/pages-plugin-mailchannels": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@cloudflare/pages-plugin-mailchannels/-/pages-plugin-mailchannels-0.1.2.tgz",
    },
    "node_modules/@cloudflare/workers-types": {
      "version": "4.20230922.0",
      "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230922.0.tgz",
    }
  }
}

{
  "name": "nnn",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "@cloudflare/pages-plugin-mailchannels": "^0.1.2",
        "@cloudflare/workers-types": "^4.20230922.0"
      }
    },
    "node_modules/@cloudflare/pages-plugin-mailchannels": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@cloudflare/pages-plugin-mailchannels/-/pages-plugin-mailchannels-0.1.2.tgz",
    },
    "node_modules/@cloudflare/workers-types": {
      "version": "4.20230922.0",
      "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230922.0.tgz",
    }
  }
}

{
  "name": "nnn",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "@cloudflare/pages-plugin-mailchannels": "^0.1.2",
        "@cloudflare/workers-types": "^4.20230922.0"
      }
    },
    "node_modules/@cloudflare/pages-plugin-mailchannels": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@cloudflare/pages-plugin-mailchannels/-/pages-plugin-mailchannels-0.1.2.tgz",
    },
    "node_modules/@cloudflare/workers-types": {
      "version": "4.20230922.0",
      "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230922.0.tgz",
    }
  }
}

Z

zinzu•9/27/23, 1:32 PM

Hey guys, I am trying to build a function using cloudflare pages and hono.js

Although, when I go to

http://127.0.0.1:65193/api/hello

http://127.0.0.1:65193/api/hello

it just says 404 not found

Why is that? I have also attached my folder structure. Am I doing something wrong?

I am referencing these docs https://hono.dev/getting-started/cloudflare-pages

Cloudflare Pages - Hono

Ultrafast web framework for Cloudflare Workers, Fastly Compute@Edge, Deno, Bun, Vercel, Lagon, Node.js, and others. Fast, but not only fast.

R

Rotationskörper•9/29/23, 6:28 PM

hi

how can i redirect to a URL in

_middleware.ts

_middleware.ts

?
currently, it gives me the wonderful "unable to parse URL"

here is the code from the middleware, maybe someone can tell me what i am doing wrong.

if (cookieIsSet()) {
    context.next();
} else {
    return Response.redirect("/login", 302);
}

if (cookieIsSet()) {
    context.next();
} else {
    return Response.redirect("/login", 302);
}

if (cookieIsSet()) {
    context.next();
} else {
    return Response.redirect("/login", 302);
}

if (cookieIsSet()) {
    context.next();
} else {
    return Response.redirect("/login", 302);
}

K

kian•9/29/23, 6:48 PM

You need to pass a full URL

Kkian You need to pass a full URL

R

Rotationskörper•9/29/23, 7:01 PM

ok... thanks
that's kinda impractical for my usecase though.
i think i'll just answer with 403s instead.
thanks anyway!

C

charelf•9/30/23, 7:10 PM

Hey, I am trying to send an email with a cloudlfare page function. I am following this tutorial https://developers.cloudflare.com/email-routing/email-workers/send-email-workers/ for the new email workers but im stuck -- it says to put something in a wrangler.toml file, but there is no wrangler.toml file in cf pages? where do i put it instead?

Send emails from Workers (beta) · Cloudflare Email Routing docs

You can send an email about your Worker’s activity from your Worker to an email address verified on Email Routing. This is useful for when you want to …

K

kian•9/30/23, 7:18 PM

You can't use

send_email

send_email

send_email

send_email bindings with Pages/Functions.

C

charelf•9/30/23, 7:18 PM

ok:(

C

charelf•9/30/23, 7:19 PM

thanks though. I will then use a worker until this works

Do functions not work locally or am i doing something wrong

Similar Threads

Similar Threads

Similar Threads