Hi I'm trying to build an app with Pages (hopefully with R2 and D1 as well), but am struggling with setting up Functions properly. The app is an Vite-powered SPA, but all the requests matching to Functions routing return the SPA instead of an API response defined in

functions

directory. Below are the steps to reproduce my problem:

npm init vite@latest repro -- --template react
cd repro
npm install
npm install -D wrangler
mkdir -p functions/api
echo "export const onRequest = c => new Response('Hello world!');" > functions/api/hello.js
npx wrangler pages dev -- npx vite

Then, running

curl http://localhost:5173/api/hello

returns the scaffolded app instead of

Hello world!

. I have consulted the documentation at https://developers.cloudflare.com/pages/platform/functions/ especially the Routing section, but found no clue. I'd appreciate it if anyone could point out what I'm doing wrong.

5173 is Vite - you need to open Wrangler's port which is likely 8788, but otherwise scroll down in the terminal output.

Vite

Thanks, 8788 definitely worked! Other two questions occurred to me though; - Where can I find the port number for wrangler? The initial terminal output didn't show it. - How can Pages call Functions API? The following patch in

src/App.jsx

logs the SPA in DevTools because it uses the Vite's port. However, what I want to call here is obviously Functions'

/api/hello

endpoint.

diff
-         <button onClick={() => setCount((count) => count + 1)}>
+         <button onClick={() => {
+           fetch('/api/hello')
+             .then(r=>r.text())
+             .then(t=>console.log(t))
+           return setCount((count) => count + 1)
+         }}>

I'm getting a

Script startup exceeded CPU time limit

with all of my page functions... but I don't think that a function that retunrs another fecth should cause it.

js
export async function onRequestGet(context) {
    try {
        if (!context.request.headers.get('X-SL-User')) {
            return new Response('Not logged in', {status: 401})
        }
        let token = context.request.headers.get('X-SL-User').split(':')[0]
        let uid = context.request.headers.get('X-SL-User').split(':')[1]
        token = decodeURI(token)
        let response = await fetch(`https://subdomain.schoolloop.com/mapi/assignments?studentID=${uid}`,
            {
                headers: {
                    "Authorization": `Basic ${token}`
                }
            }
        )
        response = await response.json()
        return new Response(
            JSON.stringify(response),
            {
                status: 200,
                headers: {
                    'content-type': 'application/json',
                    "cache-control": `s-maxage=1200, stale-while-revalidate=600`
                },
            }
        )
    } catch (e) {
        return new Response(`${e} | token: ${token} | uid: ${uid}`, {status: 500})
    }
}

Are you importing anything? Is that your entire Function? Any middleware that runs before?

this is the entire function

I've got 3 others that are exactly the same, just a different url

Are you using any kind of framework to build this? That function itself looks totally reasonable on the surface

I'm using Nextjs but this is a seperate functions/ dir

Edge Runtime

And

next-on-pages

I imagine?

yes

hol up

nvm

same thing

removed a console.log I had, but it doesn't seem to do the trick

I don't really have a good suggestion for ya unfortunately. This is a common issue with

next-on-pages

as the bundle size grows. https://github.com/cloudflare/next-on-pages/issues/47. https://github.com/cloudflare/next-on-pages/issues/2. etc.

I can only really recommend creating an issue on the repo with a reproduction.

next-on-pages

itself is in a state right now that I couldn't personally recommend it due to lack of maintenance and support, and would encourage you to consider an alternate solution like Netlify or Vercel for your project if you need a quick resolution. 😦

Is there a way to handle multiple get requests in a single page function file?

I could also just move it to a worker

Multiple get requests? What do you mean? To different paths?

Right now I have page functions files with single get requests to their path, would there be a way to consolidate them into a single file instead, or that not recommended?

you can do

[path].js

which would fire for

/_sl/*

You could do something like

[slug].js

but that of course would match all slugs under

_sl/

otherwise no, you couldn't really listen for just those 4

now, would that fix the original issue? lol

And I honestly doubt that's your issue here either. The size of your next project due to next-on-pages is likely just your issue here.

Of which there's very little you can do unfortunately