I'm using TypeScript with the default tsconfig that is from the docs, I also have another tsconfig f

Ttozz I'm using TypeScript with the default tsconfig that is from the docs, I also hav...

H

Any files in functions that don’t export onRequest* won’t be bundled(unless they are imported by a file that does export onRequest*)

HHello, I’m Allie!Any files in functions that don’t export onRequest* won’t be bundled(unless they...

T

tozzOP•2/7/24, 9:16 AM

Ok, I'm only looking in dev-mode using wrangler and there they are exposed just as normal files, but makes sense that the bundle step would remove them

Original message was deleted

J

JustinNoel•2/7/24, 1:25 PM

It's been a while since i touched Remix, but i remember they believed middleware was an anti-pattern.

What I did to overcome this was put what I would consider "middleware" in utility functions. Then, in every loader, i would call those utility functions. That way, I was as DRY as possible.

Original message was deleted

M

Miyagi•2/7/24, 3:59 PM

Unsure of best practice, i call my middleware function in the root.tsx... So its always listening.
....

I haven't fully tried this method, but when i attempted... wrangler cli will load and recognize your rules by logging a message in the console on startup

/pages/functions/middleware/

also consider:

/pages/functions/routing/

(cloudflare dot com obviously....)

==========

Im currently using:

npm create cloudflare@latest my-remix-app -- --framework=remix

K

Kurzon•2/7/24, 8:31 PM

_middleware.js is not even running

K

Kurzon•2/7/24, 8:32 PM

Why is that

K

Kurzon•2/7/24, 8:32 PM

I use NextJS and cloudflare next on npm package

K

Kurzon•2/7/24, 8:32 PM

functions/_middleware.js

K

Kurzon•2/7/24, 8:33 PM

export async function onRequest(context){

    console.log('Hello');

    return await next();
}

export async function onRequest(context){

    console.log('Hello');

    return await next();
}

export async function onRequest(context){

    console.log('Hello');

    return await next();
}

export async function onRequest(context){

    console.log('Hello');

    return await next();
}

J

James•2/7/24, 9:56 PM

You can't use the functions directory if you're using next-on-pages. You should be using Next.js middleware and API route handlers.

B

brian•2/8/24, 7:56 AM

Hey All, I am trying to understand how wrangler page functions deploy works with domain aliases. I have used wrangler to successfully update my page function so when I use the pages.dev link it is working with the correct function, but when I access with the domain alias, sometimes I get the old page function behaviour and sometimes I get the new behaviour. I have tried a cache clear by hostname and it didn't clear out the old page function. Any ideas why the old page function would continue to serve?

L

localλorse•2/8/24, 10:21 PM

When import this

import consumers from 'stream/consumers'

import consumers from 'stream/consumers'

import consumers from 'stream/consumers'

import consumers from 'stream/consumers', miniflare complains:

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream/consumers"

    src/routes/headlines.ts:13:22:
      13 │ import consumers from 'stream/consumers'
         ╵                       ~~~~~~~~~~~~~~~~~~

  The package "stream/consumers" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

BUT: This page says that both the

Buffer

Buffer

Buffer

Buffer and

Streams

Streams

API are supported, and I have set

node_compat = true

node_compat = true

node_compat = true

node_compat = true in my

wrangler.toml

wrangler.toml

.
So why doesn't it work? :)

(Same error if I try

import consumers from 'node:stream/consumers'

import consumers from 'node:stream/consumers'

import consumers from 'node:stream/consumers'

import consumers from 'node:stream/consumers' instead btw.)
Do I also have to set

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

in addition to

node_compat = true

node_compat = true

node_compat = true

node_compat = true?

Cloudflare Docs

Node.js compatibility · Cloudflare Workers docs

Implemented Node.js runtime APIs and enablement instructions for your Worker project.

Llocalλorse When import this `import consumers from 'stream/consumers'`, miniflare complains...

J

Julian•2/9/24, 12:15 AM

I'm not sure if you're running into the same problem as me, but what I'm actually seeing is that

wrangler

wrangler

's live reload function seems to break with these

nodejs_compat

nodejs_compat

imports. So what I'm seeing is that I can get the code to compile fine when I first run

wrangler dev

wrangler dev

but if I make any code changes at all and

wrangler

wrangler

does a live reload, it'll throw that error.

J

James•2/9/24, 12:46 AM

You need

nodejs_compat

nodejs_compat

compat flag, not

node_compat

node_compat

node_compat

node_compat to import from any

node:

node:

namespace. But yes, the latest version of wrangler did break live reloads with

node:

node:

imports, and is being tracked here: https://github.com/cloudflare/workers-sdk/issues/4959

JJames You need `nodejs_compat` compat flag, not `node_compat` to import from any `node...

L

localλorse•2/9/24, 12:57 AM

wha's the diff between

nodejs_compat

nodejs_compat

and

node_compat

node_compat

node_compat

node_compat flags?

Llocalλorse wha's the diff between `nodejs_compat` and `node_compat` flags?

J

James•2/9/24, 12:59 AM

tl;dr,

node_compat

node_compat

node_compat

node_compat is old and polyfills a bunch of stuff. It's not great, a bit slow, adds to bundle size, and the polyfills aren't perfect.

nodejs_compat

nodejs_compat

is Cloudflare's actual Node.js compatibility built right into the

workerd

workerd

workerd

workerd runtime. There's some DX pain aroound them both existing right now which I wrote up a bit at https://github.com/cloudflare/workers-sdk/issues/4082

JJames tl;dr, `node_compat` is old and polyfills a bunch of stuff. It's not great, a bi...

L

localλorse•2/9/24, 1:00 AM

so should I enable both or just one?

L

localλorse•2/9/24, 1:00 AM

is one a superset of the other?

J

James•2/9/24, 1:00 AM

you can't enable both, it's not possible

J

James•2/9/24, 1:00 AM

I would personally recommend only ever using

nodejs_compat

nodejs_compat

these days, unless you're using something legacy that specifically needs

node_compat

node_compat

node_compat

node_compat, like

pg

pg

J

James•2/9/24, 1:01 AM

With Pages Functions, you also can't really use

node_compat

node_compat

node_compat

node_compat, only

nodejs_compat

nodejs_compat

J

James•2/9/24, 1:01 AM

It's all a bit confusing, sorry

JJames I would personally recommend only ever using `nodejs_compat` these days, unless ...

L

localλorse•2/9/24, 1:05 AM

my project is based on this template which uses

node_compat

node_compat

node_compat

node_compat: https://github.com/timothymiller/t4-app/blob/93c8ee3dfcfa181ac7d66c23048cbf7d13648e26/packages/api/wrangler.toml#L4

J

James•2/9/24, 1:06 AM

This looks like a Workers project, not Pages Functions

J

James•2/9/24, 1:07 AM

Maybe one of their dependencies requires

node_compat

node_compat

node_compat

node_compat, not sure

J

James•2/9/24, 1:09 AM

I would heavily encourage you to use

nodejs_compat

nodejs_compat

, drop

node_compat

node_compat

node_compat

node_compat and import from the

node:

node:

prefix if you can, though

JJames I would heavily encourage you to use `nodejs_compat`, drop `node_compat` and imp...

L

localλorse•2/9/24, 1:11 AM

what if some transitive deps don't import from the

node:

node:

prefix?

J

James•2/9/24, 1:12 AM

Then it'll depend drastically on what/how they import things. If they import stuff that's covered by

node_compat

node_compat

node_compat

node_compat, you might be okay, but then you can't use anything from

nodejs_compat

nodejs_compat

. This is unfortunately where the DX starts to really decline, and the crux of my issue at https://github.com/cloudflare/workers-sdk/issues/4082. It's not a great experience.

J

James•2/9/24, 1:12 AM

It's not uncommon for people to have start patching their dependencies, and that sucks

HHello, I’m Allie!As far as I'm aware, you can only use `wrangler` or a framework's dev command. I...

《

《 Sarge 》•2/9/24, 9:03 AM

Well that is a shame :/ I was hopinf for a straight forward process. Thanks for confirming.

《《 Sarge 》Well that is a shame :/ I was hopinf for a straight forward process. Thanks for ...

H

Hello, I’m Allie!•2/9/24, 9:07 AM

Though actually, this has changed recently. Some frameworks are adding support for certain bindings via Miniflare's

getBindingsProxy

getBindingsProxy

getBindingsProxy

getBindingsProxy, so you could usggest to the Nuxt team that they integrate that, if they aren't already working on it

P

Paolo•2/9/24, 7:51 PM

what do you use to test functions?

P

Paolo•2/9/24, 9:36 PM

I'm struggling to test against a Response object, does anyone have any advice?

P

Paolo•2/9/24, 10:48 PM

Especially how to etract the Response body

J

James•2/9/24, 10:53 PM

await response.text()

await response.text()

await response.text()

await response.text(), or

await response.json()

await response.json()

await response.json()

await response.json() etc. are common ways to get the body. More here: https://developer.mozilla.org/en-US/docs/Web/API/Response#instance_methods. What does the response contain exactly?

P

Paolo•2/9/24, 11:19 PM

oh it's a normal Response object?

JJames `await response.text()`, or `await response.json()` etc. are common ways to get ...

P

Paolo•2/9/24, 11:26 PM

Thank you, it worked!

J

James•2/9/24, 11:27 PM

Awesome, yeah just a normal Response

P

Paolo•2/9/24, 11:28 PM

@James do you know if there is already a mocked Request object?

J

James•2/9/24, 11:29 PM

hmm I'm not quite sure what you mean. I'd recommend taking a look at some of the Pages fixtures in the

workers-sdk

workers-sdk

workers-sdk

workers-sdk repo for examples though: https://github.com/cloudflare/workers-sdk/tree/main/fixtures/pages-functions-app

J

James•2/9/24, 11:30 PM

These fixtures are what wrangler uses for its own tests

P

Paolo•2/9/24, 11:39 PM

Those are cool! those tests seem to be doing a fetch and checking the response, but instead I just call onRequestGet/Post with a mocked Request (as in a handcrafted object pretending to be a Request). I'm not sure it's the best way, but it sidesteps the network stack and I can set up the database contents more easily

A

Alexey•2/10/24, 4:24 PM

[Need Help With Functions Source Maps]
I want to generate source maps for server side (i.e.

./functions

./functions

./functions

./functions dir) code.
I found that

wrangler pages functions build ./functions --sourcemap

wrangler pages functions build ./functions --sourcemap

wrangler pages functions build ./functions --sourcemap

wrangler pages functions build ./functions --sourcemap command generates two file

index.js

index.js

index.js

index.js &

index.js.map

index.js.map

index.js.map

index.js.map which seems something what I need.
But inspection of

index.js

index.js

index.js

index.js reveals that it doesn't compile only

./functions

./functions

./functions

./functions code, but also the contents of

./src

./src

./src

./src folder.
That is weird, because docs for the command say

Compile a folder of Cloudflare Pages Functions into a single Worker

Compile a folder of Cloudflare Pages Functions into a single Worker

Compile a folder of Cloudflare Pages Functions into a single Worker

Compile a folder of Cloudflare Pages Functions into a single Worker

Is there a way to compile the

./functions

./functions

./functions

./functions into a worker file + sourcemaps and upload the generated worker afterwards?

C

cryck•2/12/24, 12:12 AM

Hey, I am running into a problem with my functions. I deployed them in the /functions folder (in this case helloworld.js). When ever I try to use one of them e.g. the example /helloworld it returns my index.html instead. Does anybody know form the top of their head what I am doing wrong?

C

cryck•2/12/24, 8:17 AM

I found the issue, functions are not supported when using direct upload.

T

Tudders•2/12/24, 8:21 AM

Hey all - has anyone done some audio encoding using a cloudflare function? Specifically wav to mp3?

P

Paolo•2/12/24, 4:14 PM

what's a good server-side templating engine to use with Functions? I'd like to be able to refer to load templates from the deployed files that are not in the published folder (for example if i publish "public", I'd keep my templates in "templates")

edit: text modules!

P

Paolo•2/12/24, 8:52 PM

oh, Handlebars does not work because it generates code, mustache works

I'm using TypeScript with the default tsconfig that is from the docs, I also have another tsconfig f

Similar Threads