NextJs 13.4 form connected with MailChimp hosted in Firebase when submitting "Internal Server Error"

328 views Asked by At

I am doing a subscription form in NextJS 13.4 and connecting it with MailChimp. In production everything works perfectly. When I push build to Firebase hosting and try to submit the form I am getting "SyntaxError: Unexpected token 'I', "Internal S"... is not valid JSON". I have tried to add Middleware and added an error for all incoming api calls.

import { NextResponse } from "next/server";

const allowedOrigins = ["https:forFailing.com/"];

export function middleware(req: Request){
    const origin = req.headers.get("origin")
    if(origin && !allowedOrigins.includes(origin)){
        return new NextResponse (null,{
            status:400,
            statusText:"Bad Request",
            headers: {
                "Content-Type": "text/plain"
            }
        })
    }
    return NextResponse.next()
}

export const config = {
    matcher: '/api/:path*'
}

I am still getting the same error "500" as before indicating that the call never reaches Middleware. I tested this part in development and it behaves as expected "400 (Bad Request)".

Form is submitted on click with this code.

"use client"
const submitForm = async (formParam: { [key: string]: string }) => {
    
  try {
    const res = await fetch("/api/mailChimpSub", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formParam),
    });
    const data = await res.json();
    return data;
  } catch (e) {
    return e;
  }
};

export default submitForm;

I am unable to see any errors with more information. If anybody have the slightest idea where I could start solving this problem please let me know. Thank you!

Edit

I have found this GitHub issue The error comes from Firebase functions. The solution for some people is to downgrade Next to 13.4.2. In my case when downgraded I get a slightly different error "502" and error in Firebase functions "The request has been terminated because it has reached the maximum request timeout. To change this limit, see https://cloud.google.com/run/docs/configuring/request-timeout" Still no Idea how to fix this.

Edit 2

Looked through a lot of forums where people were experiencing similar issues and it seems like that issue is unaddressed for a while, probably it will not be fixed soon as well,so I have moved hosting from "Firebase" to "Vercel" and it all works perfectly.

0

There are 0 answers