Render error after adding Vercel or Netlify configuration

[iCaran]

After npx astro add vercel or npx astro add vercel upon opening the project pages, that is http://localhost:4321/projects/project-1/ or others, this error is encountered:

Cannot read properties of undefined (reading 'render')

In projects/[...slug].astro:13:33:

TypeError: Cannot read properties of undefined (reading 'render')
    at /home/me/squealing-sphere/src/pages/projects/[...slug].astro:13:33
    at [...slug] (/home/me/squealing-sphere/node_modules/astro/dist/runtime/server/astro-component.js:16:12)
    at callComponentAsTemplateResultOrResponse (file:///home/me/squealing-sphere/node_modules/astro/dist/runtime/server/render/astro/render.js:90:31)
    at renderToAsyncIterable (file:///home/me/squealing-sphere/node_modules/astro/dist/runtime/server/render/astro/render.js:132:32)
    at renderPage (file:///home/me/squealing-sphere/node_modules/astro/dist/runtime/server/render/page.js:31:30)
    at lastNext (file:///home/me/squealing-sphere/node_modules/astro/dist/core/render-context.js:135:31)
    at async callMiddleware (file:///home/me/squealing-sphere/node_modules/astro/dist/core/middleware/callMiddleware.js:21:10)
    at async RenderContext.render (file:///home/me/squealing-sphere/node_modules/astro/dist/core/render-context.js:163:22)
    at async handleRoute (file:///home/me/squealing-sphere/node_modules/astro/dist/vite-plugin-astro-server/route.js:156:16)
    at async run (file:///home/me/squealing-sphere/node_modules/astro/dist/vite-plugin-astro-server/request.js:40:14)

It occurs when the astro.config.mjs is modified to:

either

import { defineConfig } from 'astro/config';
import vercel from "@astrojs/vercel/serverless";

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: vercel()
} // Your original configuration here
);

or

import { defineConfig } from 'astro/config';
import netlify from "@astrojs/netlify";

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: netlify()
} // Your original configuration here
);

It is fixed when the astro.config.mjs is modified back to:

import { defineConfig } from 'astro/config';

export default defineConfig({
  // Your original configuration here
});

[frex-is]

Subject : Resolving Cannot read properties of undefined (reading 'render') in a Server-Side Astro configuration.

Problem:

when you use the following configuration in astro.config.mjs:

export default defineConfig({
  output: "server",
  adapter: vercel()
});

you are going to encounter the error Cannot read properties of undefined (reading 'render') in your dynamic page components. This error occurs due to the change in you're execution context to server-side rendering.

Solution:

To resolve this error, you just have to explicitly set the prerender property to true in the dynamic page component to solve the issue. (in you're case the page is [...slug].astro)

export const prerender = true;

This will indicate to Astro to pre-render the page during the build process and result into generating a static HTML that can be served directly by the server.

Explanation:

When using the output: "server" configuration, Astro renders pages on the server-side. This introduce differences in how components and date are accessed compared to client-side rendering. By pre-rendering the page, you ensure that the component is rendered and all necessary data is available before the page is srved to the client.

[ttomczak3]

Apologies for the delayed response—I've been busy with moving. @iCaran I know this is coming late, but the fix has now been pushed. Thanks for bringing it to my attention, as I don’t use Vercel for hosting this project. @frex-is I really appreciate your solution and assistance with the issue—super helpful of you!