Astro middleware only works in vercel dev but not when deployed

When running on vercel dev, everything works fine but when I deploy it on vercel, the middleware no longer works?

The middleware simply redirects the users to a random page if the /works is called.

Astro Config

1import { defineConfig } from 'astro/config';// https://astro.build/config2import tailwindcss from '@tailwindcss/vite';3import vercel from "@astrojs/vercel";45export default defineConfig({6  output: "server",7  vite: {8    plugins: [tailwindcss()],9  },10  adapter: vercel({11    edgeMiddleware: true,12  }),13});

Information: Astro v5.3.0 Node v20.8.1 System macOS (arm64) Package Manager npm Output server Adapter /vercel Integrations none

Any help would be amazing! I am very lost right now :/

Vercel Staff

Hi , welcome to the Vercel Community!

Can you check your directory structure to ensure that middleware.ts is at the root of the project?

We've this example using Astro + Edge Middleware for CORS and it is working. Can you compare your code to see if you can find something?

Hi,

Thanks for the quick reply!

The middleware.ts file is currently situated in the /src directory which is what Astro's middleware uses.

I've attempted to move the middleware.ts to the root but got this error instead:

1[10:24:39.100] Running build in Washington, D.C., USA (East) – iad12[10:24:39.229] Cloning github.com/rizqyazed/personal-web-v2 (Branch: main, Commit: f18b604)3[10:24:39.765] Cloning completed: 540.000ms4[10:24:40.860] Restored build cache from previous deployment (J6bK3HwFczPnFbqoEkNasPZ5VNfX)5[10:24:40.937] Running "vercel build"6[10:24:41.319] Vercel CLI 41.2.27[10:24:42.057] Installing dependencies...8[10:24:44.155] 9[10:24:44.155] up to date in 2s10[10:24:44.156] 11[10:24:44.156] 171 packages are looking for funding12[10:24:44.156]   run `npm fund` for details13[10:24:44.196] Running "npm run build"14[10:24:44.346] 15[10:24:44.346] > ideaideaidea@0.0.1 build16[10:24:44.347] > astro build17[10:24:44.347] 18[10:24:45.811] 10:24:45 [content] Syncing content19[10:24:45.814] 10:24:45 [content] Synced content20[10:24:45.815] 10:24:45 [types] Generated 44ms21[10:24:45.817] 10:24:45 [build] output: "server"22[10:24:45.817] 10:24:45 [build] mode: "server"23[10:24:45.817] 10:24:45 [build] directory: /vercel/path0/dist/24[10:24:45.817] 10:24:45 [build] adapter: @astrojs/vercel25[10:24:45.818] 10:24:45 [build] Collecting build info...26[10:24:45.818] 10:24:45 [build] ✓ Completed in 69ms.27[10:24:45.819] 10:24:45 [build] Building server entrypoints...28[10:24:48.087] 10:24:48 [vite] [32m✓ built in 2.22s[39m29[10:24:48.088] 10:24:48 [build] ✓ Completed in 2.27s.30[10:24:48.089] 31[10:24:48.089]  building client (vite) 32[10:24:48.099] 10:24:48 [vite] transforming...33[10:24:48.131] 10:24:48 [vite] [32m✓[39m 3 modules transformed.34[10:24:48.141] 10:24:48 [vite] rendering chunks...35[10:24:48.147] 10:24:48 [vite] [32m✓ built in 52ms[39m36[10:24:48.175] 37[10:24:48.175]  prerendering static routes 38[10:24:48.181] 10:24:48 ▶ src/pages/archive.astro39[10:24:48.798] 10:24:48   └─ /archive/index.html (+616ms) 40[10:24:48.801] 10:24:48 ▶ src/pages/index.astro41[10:24:48.803] 10:24:48   └─ /index.html (+2ms) 42[10:24:48.988] 10:24:48 ▶ src/pages/[slug].astro43[10:24:49.256] 10:24:49   └─ /testing/index.html (+3ms) 44[10:24:49.257] 10:24:49 ✓ Completed in 1.10s.45[10:24:49.257] 46[10:24:49.258] 10:24:49 [build] Rearranging server assets...47[10:24:49.270] 10:24:49 [@astrojs/vercel] Bundling function ../../../../dist/server/entry.mjs48[10:24:50.309] 10:24:50 [@astrojs/vercel] Copying static files to .vercel/output/static49[10:24:50.313] 10:24:50 [build] Server built in 4.57s50[10:24:50.315] 10:24:50 [build] Complete!51[10:24:50.596] Using TypeScript 5.7.3 (local user-provided)52[10:24:53.063] middleware.ts(1,8): error TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.53[10:24:53.064] middleware.ts(2,10): error TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.54[10:24:53.064] middleware.ts(6,1): error TS1287: A top-level 'export' modifier cannot be used on value declarations in a CommonJS module when 'verbatimModuleSyntax' is enabled.55[10:24:53.064] middleware.ts(8,29): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.56[10:24:53.064] middleware.ts(9,36): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.57[10:24:53.064] middleware.ts(9,70): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.58[10:24:53.064] 59[10:24:53.284] Build Completed in /vercel/output [11s]60[10:24:53.439] Deploying outputs...61[10:24:54.961] Error: The Edge Function "middleware" is referencing unsupported modules:62[10:24:54.961] 	- __vc__ns__/0/middleware.js: astro:middleware63[10:24:55.085]

I'm guessing its because I'm using the astro middleware module. Does that mean I would have to change it?

Vercel Staff

Oh I see. the Astro middleware is an Astro API, different than the Edge Middleware from Vercel.

So, following their docs is the right way to go. May I know the use case? Because, I feel that Vercel's Edge Middleware should also be able to do what you want to do with Astro Middleware.

Also, can you revert to your original code and then try removing the edgeMiddleware from the astro config to see if that changes the behaviour?

(edited)

I'm using the middleware to intercept any request to /works and redirect the user to a random work from my portfolio. It just seems like Vercel is ignoring it entirely, as it won't redirect the users at all.

Note that it does work when the pages are not pre-rendered, but I would ideally want them to be. Astro's middleware does allow for SSG and SSR usage.

Here is the middleware.ts file:

1export const onRequest = defineMiddleware(async (context, next) => {2  console.log("middleware");3  const pb = new PocketBase(import.meta.env.POCKETBASE_URL);4  await pb.admins.authWithPassword(import.meta.env.POCKETBASE_EMAIL, import.meta.env.POCKETBASE_PASSWORD);5  const data = await pb.collection('works').getFullList();6  await pb.authStore.clear();7  if (context.url.pathname === "/works") {8    console.log("got into works");9    if (data.length === 0) {10      throw new Error("No works found");11    }1213    let randomWork;14    let attempts = 0;15    const maxAttempts = data.length * 2; // To avoid infinite loop1617    do {18      const randomIndex = Math.floor(Math.random() * data.length);19      randomWork = data[randomIndex];20      attempts++;21      console.log(attempts);22    } while (23      previouslySelectedWorks.has(randomWork.id) &&24      attempts < maxAttempts25    );2627    if (attempts >= maxAttempts) {28      previouslySelectedWorks.clear(); // Reset if all works have been selected29      previouslySelectedWorks.add(randomWork.id);30      console.warn("All works have been selected. Resetting.");31    }3233    previouslySelectedWorks.add(randomWork.id);34    console.log(previouslySelectedWorks);35    console.log(randomWork.slug);3637    return Response.redirect(new URL(`/${randomWork.slug}`, context.url), 302);38  } 3940  return next();41});

I have tried removing the edgeMiddleware and it seems to be producing the same error.

reply to #5

Vercel Staff

Hi , thanks for sharing this code. When you make the requests, what logs do you see in Vercel?

Have you tried the context.redirect API from Astro?

Hi,

So I changed to using context.redirect however, it still does the same thing. It works when in vercel dev but when deployed, it does nothing.

Here are the logs for the most recent build:

1[11:14:01.538] Running build in Washington, D.C., USA (East) – iad12[11:14:01.648] Cloning github.com/rizqyazed/personal-web-v2 (Branch: main, Commit: d940324)3[11:14:02.384] Cloning completed: 736.000ms4[11:14:03.134] Restored build cache from previous deployment (J6bK3HwFczPnFbqoEkNasPZ5VNfX)5[11:14:03.211] Running "vercel build"6[11:14:03.589] Vercel CLI 41.2.27[11:14:04.180] Installing dependencies...8[11:14:05.995] 9[11:14:05.996] up to date in 2s10[11:14:05.997] 11[11:14:05.997] 171 packages are looking for funding12[11:14:05.997]   run `npm fund` for details13[11:14:06.030] Running "npm run build"14[11:14:06.146] 15[11:14:06.147] > ideaideaidea@0.0.1 build16[11:14:06.147] > astro build17[11:14:06.147] 18[11:14:08.423] 11:14:08 [content] Syncing content19[11:14:08.435] 11:14:08 [content] Synced content20[11:14:08.436] 11:14:08 [types] Generated 53ms21[11:14:08.437] 11:14:08 [build] output: "server"22[11:14:08.438] 11:14:08 [build] mode: "server"23[11:14:08.438] 11:14:08 [build] directory: /vercel/path0/dist/24[11:14:08.438] 11:14:08 [build] adapter: @astrojs/vercel25[11:14:08.438] 11:14:08 [build] Collecting build info...26[11:14:08.439] 11:14:08 [build] ✓ Completed in 79ms.27[11:14:08.440] 11:14:08 [build] Building server entrypoints...28[11:14:10.588] 11:14:10 [vite] [32m✓ built in 2.11s[39m29[11:14:10.589] 11:14:10 [build] ✓ Completed in 2.15s.30[11:14:10.589] 31[11:14:10.590]  building client (vite) 32[11:14:10.599] 11:14:10 [vite] transforming...33[11:14:10.628] 11:14:10 [vite] [32m✓[39m 3 modules transformed.34[11:14:10.639] 11:14:10 [vite] rendering chunks...35[11:14:10.645] 11:14:10 [vite] [32m✓ built in 50ms[39m36[11:14:10.672] 37[11:14:10.672]  prerendering static routes 38[11:14:10.678] 11:14:10 ▶ src/pages/archive.astro39[11:14:10.690] 11:14:10   └─ /archive/index.htmlmiddleware40[11:14:11.592]  (+913ms) 41[11:14:11.595] 11:14:11 ▶ src/pages/index.astro42[11:14:11.596] 11:14:11   └─ /index.htmlmiddleware43[11:14:11.871]  (+276ms) 44[11:14:12.206] 11:14:12 ▶ src/pages/[slug].astro45[11:14:12.474] 11:14:12   └─ /testing/index.htmlmiddleware46[11:14:12.743]  (+269ms) 47[11:14:12.744] 11:14:12 ✓ Completed in 2.09s.48[11:14:12.745] 49[11:14:12.760] 11:14:12 [build] Rearranging server assets...50[11:14:12.767] 11:14:12 [@astrojs/vercel] Bundling function ../../../../dist/server/entry.mjs51[11:14:13.775] 11:14:13 [@astrojs/vercel] Copying static files to .vercel/output/static52[11:14:13.780] 11:14:13 [build] Server built in 5.42s53[11:14:13.781] 11:14:13 [build] Complete!54[11:14:13.862] Build Completed in /vercel/output [10s]55[11:14:13.989] Deploying outputs...56[11:14:21.163] 57[11:14:21.488] Deployment completed58[11:14:27.628] Uploading build cache [40.38 MB]...59[11:14:28.182] Build cache uploaded: 553.471ms

I noticed that middleware is present in there, but still is being ignored 😕

1[11:14:10.672] 2[11:14:10.672]  prerendering static routes 3[11:14:10.678] 11:14:10 ▶ src/pages/archive.astro4[11:14:10.690] 11:14:10   └─ /archive/index.htmlmiddleware5[11:14:11.592]  (+913ms) 6[11:14:11.595] 11:14:11 ▶ src/pages/index.astro7[11:14:11.596] 11:14:11   └─ /index.htmlmiddleware8[11:14:11.871]  (+276ms) 9[11:14:12.206] 11:14:12 ▶ src/pages/[slug].astro10[11:14:12.474] 11:14:12   └─ /testing/index.htmlmiddleware11[11:14:12.743]  (+269ms) 12[11:14:12.744] 11:14:12 ✓ Completed in 2.09s.13[11:14:12.745]

Is this problem common when deploying on Vercel?

Vercel Staff

Hi , thanks. Can you also share the request logs? I mean what do you see in the runtime logs.

Oh my bad!

It doesn't seem like theres anything in the runtime logs too! Completely empty 😅

Vercel Staff

Hi , thanks for confirming. I'll try to reproduce this error on my account.

It shouldn't be a Vercel issue, I'm guessing we are missing some understanding about Astro middleware here.

Vercel Staff

Hi , thanks for waiting. I was able to get it working with the following code:

Astro middleware redirecting

I see these logs: Astro logs in Vercel

You can try it at: https://astro-example-xi.vercel.app/work

This topic is closed. It no longer accepts new replies.

Hi,

Thanks for the quick reply!

The middleware.ts file is currently situated in the /src directory which is what Astro's middleware uses.

I've attempted to move the middleware.ts to the root but got this error instead:

1[10:24:39.100] Running build in Washington, D.C., USA (East) – iad12[10:24:39.229] Cloning github.com/rizqyazed/personal-web-v2 (Branch: main, Commit: f18b604)3[10:24:39.765] Cloning completed: 540.000ms4[10:24:40.860] Restored build cache from previous deployment (J6bK3HwFczPnFbqoEkNasPZ5VNfX)5[10:24:40.937] Running "vercel build"6[10:24:41.319] Vercel CLI 41.2.27[10:24:42.057] Installing dependencies...8[10:24:44.155] 9[10:24:44.155] up to date in 2s10[10:24:44.156] 11[10:24:44.156] 171 packages are looking for funding12[10:24:44.156]   run `npm fund` for details13[10:24:44.196] Running "npm run build"14[10:24:44.346] 15[10:24:44.346] > ideaideaidea@0.0.1 build16[10:24:44.347] > astro build17[10:24:44.347] 18[10:24:45.811] 10:24:45 [content] Syncing content19[10:24:45.814] 10:24:45 [content] Synced content20[10:24:45.815] 10:24:45 [types] Generated 44ms21[10:24:45.817] 10:24:45 [build] output: "server"22[10:24:45.817] 10:24:45 [build] mode: "server"23[10:24:45.817] 10:24:45 [build] directory: /vercel/path0/dist/24[10:24:45.817] 10:24:45 [build] adapter: @astrojs/vercel25[10:24:45.818] 10:24:45 [build] Collecting build info...26[10:24:45.818] 10:24:45 [build] ✓ Completed in 69ms.27[10:24:45.819] 10:24:45 [build] Building server entrypoints...28[10:24:48.087] 10:24:48 [vite] [32m✓ built in 2.22s[39m29[10:24:48.088] 10:24:48 [build] ✓ Completed in 2.27s.30[10:24:48.089] 31[10:24:48.089]  building client (vite) 32[10:24:48.099] 10:24:48 [vite] transforming...33[10:24:48.131] 10:24:48 [vite] [32m✓[39m 3 modules transformed.34[10:24:48.141] 10:24:48 [vite] rendering chunks...35[10:24:48.147] 10:24:48 [vite] [32m✓ built in 52ms[39m36[10:24:48.175] 37[10:24:48.175]  prerendering static routes 38[10:24:48.181] 10:24:48 ▶ src/pages/archive.astro39[10:24:48.798] 10:24:48   └─ /archive/index.html (+616ms) 40[10:24:48.801] 10:24:48 ▶ src/pages/index.astro41[10:24:48.803] 10:24:48   └─ /index.html (+2ms) 42[10:24:48.988] 10:24:48 ▶ src/pages/[slug].astro43[10:24:49.256] 10:24:49   └─ /testing/index.html (+3ms) 44[10:24:49.257] 10:24:49 ✓ Completed in 1.10s.45[10:24:49.257] 46[10:24:49.258] 10:24:49 [build] Rearranging server assets...47[10:24:49.270] 10:24:49 [@astrojs/vercel] Bundling function ../../../../dist/server/entry.mjs48[10:24:50.309] 10:24:50 [@astrojs/vercel] Copying static files to .vercel/output/static49[10:24:50.313] 10:24:50 [build] Server built in 4.57s50[10:24:50.315] 10:24:50 [build] Complete!51[10:24:50.596] Using TypeScript 5.7.3 (local user-provided)52[10:24:53.063] middleware.ts(1,8): error TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.53[10:24:53.064] middleware.ts(2,10): error TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.54[10:24:53.064] middleware.ts(6,1): error TS1287: A top-level 'export' modifier cannot be used on value declarations in a CommonJS module when 'verbatimModuleSyntax' is enabled.55[10:24:53.064] middleware.ts(8,29): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.56[10:24:53.064] middleware.ts(9,36): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.57[10:24:53.064] middleware.ts(9,70): error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.58[10:24:53.064] 59[10:24:53.284] Build Completed in /vercel/output [11s]60[10:24:53.439] Deploying outputs...61[10:24:54.961] Error: The Edge Function "middleware" is referencing unsupported modules:62[10:24:54.961] 	- __vc__ns__/0/middleware.js: astro:middleware63[10:24:55.085]

I'm guessing its because I'm using the astro middleware module. Does that mean I would have to change it?