I'm pulling data from WordPress using the REST API. Everything works as expected with no issues when in SSG mode. We've recently decided to switch the post templates to use SSR mode (Hybrid) so our internal marketing team can see content updates more quickly on the frontend.
Unfortunately after deploying the changes to Vercel, I'm receiving status 500 and the following error in the logs whenever I attempt to load an individual post page:
01:16:36 PM [ssr] Error: Expected an exported Astro component but received typeof undefined
at renderPage (file:///var/task/vercel/path0/dist/chunks/entrypoint.9b492675.mjs:577:11)
at #tryRenderRoute (file:///var/task/vercel/path0/dist/chunks/entrypoint.9b492675.mjs:772:24)
at SSRRoutePipeline.renderRoute (file:///var/task/vercel/path0/dist/chunks/entrypoint.9b492675.mjs:719:46)
at App.render (file:///var/task/vercel/path0/dist/chunks/entrypoint.9b492675.mjs:932:39)
at async Object.handler (file:///var/task/vercel/path0/dist/chunks/entrypoint.9b492675.mjs:1315:33)
at async Server.<anonymous> (/var/task/___vc/__launcher.js:886:14)
The page template works fine if I use the Node adapter and run the site locally.
Snippet from blog/[slug.astro]:
const { slug } = Astro.params;
let res = await fetch(`${import.meta.env.API_URL}/wp-json/wp/v2/posts`);
let posts = await res.json();
const post = posts.find((post) => post.slug === slug);
if (!post) return Astro.redirect("/404");
---
astro.config.mjs:
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
output: 'hybrid',
adapter: vercel(),
integrations: [tailwind(), react()],
image: {
domains: ["cms.the-estate.cargodev.co.uk"]
},
build: {},
});
Can anyone perhaps point me in the right direction on the possible root cause of this issue? Thanks!