Search code examples
reactjstypescriptserver-side-renderingastrojs

`Astro.clientAddress` is only available when using `output: 'server'`. I have added output: 'server' already


So when trying to build the Astro codebase with npm run build I got the following error.

 error   `Astro.clientAddress` is only available when using `output: 'server'`. Update your Astro config if you need SSR features.

This is my astro.config.ts

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap'; // https://astro.build/config

import vercel from "@astrojs/vercel/serverless";
import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  site: "https://visrut.xyz",
  markdown: {
    syntaxHighlight: "prism"
  },
  integrations: [sitemap(), react()],
  output: 'server',
  adapter: vercel(),
});

As you can see output: 'server' is already enabled. I have a component called pdf-summary-tool.astro as I am trying to create a pdf summarization tool on my website but I am also limiting IP because it's free.

---
// pages/pdf-summary-tool.astro

export const prerender = true;

import Base from "../layouts/Base.astro";
import PdfViwer from "./components/pdf-viwer";
---

<Base title="Get PDF Page Summary">
    <h6>PDF Summary</h6>
    <PdfViwer client:only="react" />
</Base>

<style>
    h6 {
        text-align: center;
        margin: 5px 10px;
    }
</style>

PDFViewer is a simple react functional component and I have created a backed API pages/api/pdf-summary.ts

// pages/api/pdf-summary.ts

import type { APIContext } from 'astro';

const API_LIMIT = 1;

export async function post({ request, clientAddress }: APIContext) {
    const pdfText = (await request.json()).pdfText;

    const ip = clientAddress;

    // maintain state information of IP
    if(state.ip.count > API_LIMIT) {
        // throw error about API LIMIT exceeding.
    }

    return {
        body: JSON.stringify({
            error: "Here is the pdf summary: "
        }),
    };
}

So this is it, this thing is working with npm run dev but when I tried to deploy it on vercel npm run build failed, also I checked if npm run build fails locally or not. It does fail locally as well.

If you know of any other configuration I have missed or maybe is it an error because of react component I am using export const prerender = true; as well but it didn't help.


Solution

  • I was able to solve it using simple one-line removal from my code.

    I removed this line: export const prerender = true; from my Astro component and it worked.

    maybe I have to remove it because I was using <PdfViwer client:only="react" />.