rizqyazed
March 10, 2025, 10:17am
1
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
import { defineConfig } from 'astro/config';// https://astro.build/config
import tailwindcss from '@tailwindcss/vite';
import vercel from "@astrojs/vercel";
export default defineConfig({
output: "server",
vite: {
plugins: [tailwindcss()],
},
adapter: vercel({
edgeMiddleware: true,
}),
});
Information: @astrojs /vercel
Any help would be amazing! I am very lost right now
anshumanb
March 10, 2025, 10:22am
2
Hi @rizqyazed , 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?
rizqyazed
March 10, 2025, 10:28am
3
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:
[10:24:39.100] Running build in Washington, D.C., USA (East) – iad1
[10:24:39.229] Cloning github.com/rizqyazed/personal-web-v2 (Branch: main, Commit: f18b604)
[10:24:39.765] Cloning completed: 540.000ms
[10:24:40.860] Restored build cache from previous deployment (J6bK3HwFczPnFbqoEkNasPZ5VNfX)
[10:24:40.937] Running "vercel build"
[10:24:41.319] Vercel CLI 41.2.2
[10:24:42.057] Installing dependencies...
[10:24:44.155]
[10:24:44.155] up to date in 2s
[10:24:44.156]
[10:24:44.156] 171 packages are looking for funding
[10:24:44.156] run `npm fund` for details
[10:24:44.196] Running "npm run build"
[10:24:44.346]
[10:24:44.346] > ideaideaidea@0.0.1 build
[10:24:44.347] > astro build
[10:24:44.347]
[10:24:45.811] 10:24:45 [content] Syncing content
[10:24:45.814] 10:24:45 [content] Synced content
[10:24:45.815] 10:24:45 [types] Generated 44ms
[10:24:45.817] 10:24:45 [build] output: "server"
[10:24:45.817] 10:24:45 [build] mode: "server"
[10:24:45.817] 10:24:45 [build] directory: /vercel/path0/dist/
[10:24:45.817] 10:24:45 [build] adapter: @astrojs/vercel
[10:24:45.818] 10:24:45 [build] Collecting build info...
[10:24:45.818] 10:24:45 [build] ✓ Completed in 69ms.
[10:24:45.819] 10:24:45 [build] Building server entrypoints...
[10:24:48.087] 10:24:48 [vite] e[32m✓ built in 2.22se[39m
[10:24:48.088] 10:24:48 [build] ✓ Completed in 2.27s.
[10:24:48.089]
[10:24:48.089] building client (vite)
[10:24:48.099] 10:24:48 [vite] transforming...
[10:24:48.131] 10:24:48 [vite] e[32m✓e[39m 3 modules transformed.
[10:24:48.141] 10:24:48 [vite] rendering chunks...
[10:24:48.147] 10:24:48 [vite] e[32m✓ built in 52mse[39m
[10:24:48.175]
[10:24:48.175] prerendering static routes
[10:24:48.181] 10:24:48 ▶ src/pages/archive.astro
[10:24:48.798] 10:24:48 └─ /archive/index.html (+616ms)
[10:24:48.801] 10:24:48 ▶ src/pages/index.astro
[10:24:48.803] 10:24:48 └─ /index.html (+2ms)
[10:24:48.988] 10:24:48 ▶ src/pages/[slug].astro
[10:24:49.256] 10:24:49 └─ /testing/index.html (+3ms)
[10:24:49.257] 10:24:49 ✓ Completed in 1.10s.
[10:24:49.257]
[10:24:49.258] 10:24:49 [build] Rearranging server assets...
[10:24:49.270] 10:24:49 [@astrojs/vercel] Bundling function ../../../../dist/server/entry.mjs
[10:24:50.309] 10:24:50 [@astrojs/vercel] Copying static files to .vercel/output/static
[10:24:50.313] 10:24:50 [build] Server built in 4.57s
[10:24:50.315] 10:24:50 [build] Complete!
[10:24:50.596] Using TypeScript 5.7.3 (local user-provided)
[10:24:53.063] middleware.ts(1,8): error TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.
[10:24:53.064] middleware.ts(2,10): error TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.
[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.
[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'.
[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'.
[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'.
[10:24:53.064]
[10:24:53.284] Build Completed in /vercel/output [11s]
[10:24:53.439] Deploying outputs...
[10:24:54.961] Error: The Edge Function "middleware" is referencing unsupported modules:
[10:24:54.961] - __vc__ns__/0/middleware.js: astro:middleware
[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?
anshumanb
March 10, 2025, 10:55am
4
Oh I see. @rizqyazed 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?
rizqyazed
March 10, 2025, 11:07am
5
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:
export const onRequest = defineMiddleware(async (context, next) => {
console.log("middleware");
const pb = new PocketBase(import.meta.env.POCKETBASE_URL);
await pb.admins.authWithPassword(import.meta.env.POCKETBASE_EMAIL, import.meta.env.POCKETBASE_PASSWORD);
const data = await pb.collection('works').getFullList();
await pb.authStore.clear();
if (context.url.pathname === "/works") {
console.log("got into works");
if (data.length === 0) {
throw new Error("No works found");
}
let randomWork;
let attempts = 0;
const maxAttempts = data.length * 2; // To avoid infinite loop
do {
const randomIndex = Math.floor(Math.random() * data.length);
randomWork = data[randomIndex];
attempts++;
console.log(attempts);
} while (
previouslySelectedWorks.has(randomWork.id) &&
attempts < maxAttempts
);
if (attempts >= maxAttempts) {
previouslySelectedWorks.clear(); // Reset if all works have been selected
previouslySelectedWorks.add(randomWork.id);
console.warn("All works have been selected. Resetting.");
}
previouslySelectedWorks.add(randomWork.id);
console.log(previouslySelectedWorks);
console.log(randomWork.slug);
return Response.redirect(new URL(`/${randomWork.slug}`, context.url), 302);
}
return next();
});
I have tried removing the edgeMiddleware and it seems to be producing the same error.
anshumanb
March 11, 2025, 10:13am
7
Hi @rizqyazed , 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?
rizqyazed
March 11, 2025, 11:19am
8
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:
[11:14:01.538] Running build in Washington, D.C., USA (East) – iad1
[11:14:01.648] Cloning github.com/rizqyazed/personal-web-v2 (Branch: main, Commit: d940324)
[11:14:02.384] Cloning completed: 736.000ms
[11:14:03.134] Restored build cache from previous deployment (J6bK3HwFczPnFbqoEkNasPZ5VNfX)
[11:14:03.211] Running "vercel build"
[11:14:03.589] Vercel CLI 41.2.2
[11:14:04.180] Installing dependencies...
[11:14:05.995]
[11:14:05.996] up to date in 2s
[11:14:05.997]
[11:14:05.997] 171 packages are looking for funding
[11:14:05.997] run `npm fund` for details
[11:14:06.030] Running "npm run build"
[11:14:06.146]
[11:14:06.147] > ideaideaidea@0.0.1 build
[11:14:06.147] > astro build
[11:14:06.147]
[11:14:08.423] 11:14:08 [content] Syncing content
[11:14:08.435] 11:14:08 [content] Synced content
[11:14:08.436] 11:14:08 [types] Generated 53ms
[11:14:08.437] 11:14:08 [build] output: "server"
[11:14:08.438] 11:14:08 [build] mode: "server"
[11:14:08.438] 11:14:08 [build] directory: /vercel/path0/dist/
[11:14:08.438] 11:14:08 [build] adapter: @astrojs/vercel
[11:14:08.438] 11:14:08 [build] Collecting build info...
[11:14:08.439] 11:14:08 [build] ✓ Completed in 79ms.
[11:14:08.440] 11:14:08 [build] Building server entrypoints...
[11:14:10.588] 11:14:10 [vite] e[32m✓ built in 2.11se[39m
[11:14:10.589] 11:14:10 [build] ✓ Completed in 2.15s.
[11:14:10.589]
[11:14:10.590] building client (vite)
[11:14:10.599] 11:14:10 [vite] transforming...
[11:14:10.628] 11:14:10 [vite] e[32m✓e[39m 3 modules transformed.
[11:14:10.639] 11:14:10 [vite] rendering chunks...
[11:14:10.645] 11:14:10 [vite] e[32m✓ built in 50mse[39m
[11:14:10.672]
[11:14:10.672] prerendering static routes
[11:14:10.678] 11:14:10 ▶ src/pages/archive.astro
[11:14:10.690] 11:14:10 └─ /archive/index.htmlmiddleware
[11:14:11.592] (+913ms)
[11:14:11.595] 11:14:11 ▶ src/pages/index.astro
[11:14:11.596] 11:14:11 └─ /index.htmlmiddleware
[11:14:11.871] (+276ms)
[11:14:12.206] 11:14:12 ▶ src/pages/[slug].astro
[11:14:12.474] 11:14:12 └─ /testing/index.htmlmiddleware
[11:14:12.743] (+269ms)
[11:14:12.744] 11:14:12 ✓ Completed in 2.09s.
[11:14:12.745]
[11:14:12.760] 11:14:12 [build] Rearranging server assets...
[11:14:12.767] 11:14:12 [@astrojs/vercel] Bundling function ../../../../dist/server/entry.mjs
[11:14:13.775] 11:14:13 [@astrojs/vercel] Copying static files to .vercel/output/static
[11:14:13.780] 11:14:13 [build] Server built in 5.42s
[11:14:13.781] 11:14:13 [build] Complete!
[11:14:13.862] Build Completed in /vercel/output [10s]
[11:14:13.989] Deploying outputs...
[11:14:21.163]
[11:14:21.488] Deployment completed
[11:14:27.628] Uploading build cache [40.38 MB]...
[11:14:28.182] Build cache uploaded: 553.471ms
I noticed that middleware is present in there, but still is being ignored
[11:14:10.672]
[11:14:10.672] prerendering static routes
[11:14:10.678] 11:14:10 ▶ src/pages/archive.astro
[11:14:10.690] 11:14:10 └─ /archive/index.htmlmiddleware
[11:14:11.592] (+913ms)
[11:14:11.595] 11:14:11 ▶ src/pages/index.astro
[11:14:11.596] 11:14:11 └─ /index.htmlmiddleware
[11:14:11.871] (+276ms)
[11:14:12.206] 11:14:12 ▶ src/pages/[slug].astro
[11:14:12.474] 11:14:12 └─ /testing/index.htmlmiddleware
[11:14:12.743] (+269ms)
[11:14:12.744] 11:14:12 ✓ Completed in 2.09s.
[11:14:12.745]
Is this problem common when deploying on Vercel?
anshumanb
March 11, 2025, 11:22am
9
Hi @rizqyazed , thanks. Can you also share the request logs? I mean what do you see in the runtime logs.
rizqyazed
March 11, 2025, 11:27am
10
Oh my bad!
It doesn’t seem like theres anything in the runtime logs too! Completely empty
anshumanb
March 11, 2025, 1:16pm
11
Hi @rizqyazed , 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.
anshumanb
March 12, 2025, 7:44am
12
Hi @rizqyazed , thanks for waiting. I was able to get it working with the following code:
I see these logs:
You can try it at: https://astro-example-xi.vercel.app/work
