Vercel serverless functions not being correctly routed

[astlaan]

In this repo I have the branch “svelte”, which contains all the code reflecting the current problem I am having:

GitHub - Astlaan/electricity-consumption-mix at svelte

As can be seen, this is a project using a monorepo format. The frontend folder contains the Svelte frontend, which is correctly working, I can visit the website via the preview link and navigate correctly.

The backend folder, contains the api folder with the api endpoint, and the src folder with the core logic for the serverless function.

However, when in the website I make a click that makes a api call to the “generate_plot” serverless function, I get the following error in the Vercel Log:

As can be seen, it says /api/generate_plot was not found. A stranger thing perhaps, is that it reports on the right that the called route is `/![-]/catchall. I am not sure how to fix this.

This is my vercel.json:

{
  "version": 2,
  "builds": [
    {
      "src": "frontend/package.json",
      "use": "@vercel/static-build",
      "config": {
        "cwd": "frontend",
        "distDir": ".vercel/output"
      }
    },
    {
      "src": "backend/api/**/*.py",
      "use": "@vercel/python",
      "config": {
        "runtime": "python3.12",
        "memory": 1024,
        "includeFiles": [
          "backend/src/**",
          "backend/requirements.txt"
        ]
      }
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/backend/api/$1"
    },
    {
      "handle": "filesystem"
    }
  ]
}

Note: initially I tried to run the project without the builds field in vercel.json, however, then visualizing the website preview I was just getting a 404 not found error. Defining the build for the frontend fixed that issue.

How to fix this?

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[astlaan]

@anshumanb any ideas?

[anshumanb (Anshuman Bhardwaj)]

Hi @astlaan, I recommend keeping the folder structure flat so that you have a svelte app with a /api directory that contains your Python code. Vercel requires the /api folder containing the serverless functions at the root of your app.

Now, for building your frontend, it relies on the root package.json file and the outputs it generates. The simplest way is to only remove everything from your vercel.json file and start over with the folder structure I shared: a Svelte app with an API directory.

Let this project build and notice what Vercel generates.

For reference, we have an example repo with Next.js and Flask APIs.

I hope this was helpful.

[astlaan]

@anshumanb

The problem for me with using the zero config option (deleting vercel.json) is that some some reason vercel imports stuff into the python serverless function it is not supposed to.

If I delete vercel.json, I get:

Error: A Serverless Function has exceeded the unzipped maximum size of 250 MB.

For that reason I had a vercel.json with:

{
    "functions": {
        "api/*.py": {
            "memory": 1024,
            "excludeFiles": ".venv/**,.vercel/cache/**,vscode/**,attic/**,docs/**,public/**,tests/**,tools/**",
            "maxDuration": 60
        }
    }
}

This made it work, at least till I migrated the frontend from html+js to Svelte.

Although now, even that stopped working and I still get the 250MB issue. For example, for this svelte-2 branch (GitHub - Astlaan/electricity-consumption-mix at svelte-2), where I created an /api folder, I added all the unnecessary folders in the “excludeFiles”, but I keep getting this error. I know this is not due to the size of the python dependencies, since if I create a python venv, and do pip install -r requirements.txt, the total size of the venv folder is 140 MB.

So, due to this, it seems it is not an option for me to use zero config.

[anshumanb (Anshuman Bhardwaj)]

Hi @astlaan, I see. The reason you’re getting this error could be:

• 140 MB of Python dependencies
• Folder sizes on disk:
  ‣ Input source code: 13 MB
  ‣ Build cache: <1 MB
  ‣ Output files: 8 MB
  ‣ Node modules: 105 MB

I think the sum of all these is > 250 MB.

I recommend keeping the mono repo structure but splitting the app into two Vercel projects: one Svelte frontend and one Python backend.

You can use the Root Directory option from the Vercel dashboard to set the directory to backend or frontend folders from the mono repo: