Are Page Functions bundled differently than regular Workers?

Does anyone know if Page Functions are bundled differently than regular Workers that you deploy via

wrangler deploy

wrangler deploy

wrangler deploy

wrangler deploy?

I have a Worker that lives in the same project directory as a Cloudflare Pages site.

My Worker fetches data from an external API: https://github.com/AleksandrHovhannisyan/aleksandrhovhannisyan.com/blob/977e2c600ec5c629db61f8ee2eaee60e1ef86923/functions/api/comments.ts

This works as expected when deployed as a regular worker via

wrangler deploy

wrangler deploy

wrangler deploy

wrangler deploy . All external modules are included/bundled in the final code and my client code is able to read the responses.

However, if I try to convert this worker to be a Page Function so that I don't have to manually re-deploy it every time, I get errors in my deploy logs saying certain external node modules (e.g.,

prismjs

prismjs

prismjs

prismjs) could not be resolved. These modules are being

import

import

import

imported by the Page Function through other modules outside my

functions/

functions/

functions/

functions/ directory. Basically, here is a simplified view of my project structure:

.
├── config
│   └── utils.js
├── functions
│   ├── api
│   │   └── comments.ts
│   └── tsconfig.json
├── package.json
├── pnpm-lock.yaml
├── src
├── wrangler.toml
└── wrangler.toml.example

.
├── config
│   └── utils.js
├── functions
│   ├── api
│   │   └── comments.ts
│   └── tsconfig.json
├── package.json
├── pnpm-lock.yaml
├── src
├── wrangler.toml
└── wrangler.toml.example

.
├── config
│   └── utils.js
├── functions
│   ├── api
│   │   └── comments.ts
│   └── tsconfig.json
├── package.json
├── pnpm-lock.yaml
├── src
├── wrangler.toml
└── wrangler.toml.example

.
├── config
│   └── utils.js
├── functions
│   ├── api
│   │   └── comments.ts
│   └── tsconfig.json
├── package.json
├── pnpm-lock.yaml
├── src
├── wrangler.toml
└── wrangler.toml.example

functions/api/comments.ts

functions/api/comments.ts

functions/api/comments.ts

functions/api/comments.ts script imports shared modules from

../../config/*

../../config/*

../../config/*

../../config/*, such as for Markdown processing (I reuse the same Markdown processor to parse comments as I do on my site).

This setup only works with a regular worker, not a Page Function.

I'm not sure if it makes any difference, but:

I am using pnpm as my package manager (I don't think this is related).
I am not using pnpm workspaces (maybe this is related?). I have just one
```
package.json
```
```
package.json
```
at the root of the project.

aleksandrOP•9/1/24, 4:02 PM

One interesting thing I found is that if I go to my Worker in my dashboard and click the Edit codeEdit code link, I'm able to see the final bundled JavaScript and it looks like it's just bundling all those external modules, which explains why it doesn't run into any problems. So now I'm curious what Page Functions do differently.

aleksandrOP•9/1/24, 4:02 PM

James•9/1/24, 5:57 PM

Pages will also bundle any dependencies when you wrangler pages deploywrangler pages deploy, or when building in the Pages CI. Monorepo-like things and Pages CI are a bit tricky, but very possible. Are you sure that

npm install

npm install

(or equivalent) is running in the same directory as your

package.json

package.json

with

prismjs

prismjs

aleksandrOP•9/1/24, 6:09 PM

Hmm, strange! Well it's good to know they (should) behave the same. I'll have to try again and see if I can figure out why the deploy throws those errors when deploying it as a Page Function instead of an ordinary worker. The package (

prismjs

prismjs

) is installed in the root of my repo and imported correctly in the module that my Page Function imports.

Are Page Functions bundled differently than regular Workers?

Similar Threads

Similar Threads

Similar Threads