Next.js Discord

Discord Forum

Type error: has an invalid "default" export: Type "EditWaterStationInformationProps" is not valid.

Unanswered
Jenn posted this in #help-forum
Open in Discord
JennOP
On the development side, I have no errors or any red line on this page.tsx. But this error shows on the build side when I deployed this to Vercel: Type error: Page "app/water_station/edit/[id]/page.tsx" has an invalid "default" export: Type "EditWaterStationInformationProps" is not valid.
Below are the codes:
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

interface WaterStation {
    id: number;
    station_name: string;
    address: string;
    barangay: string;
    remarks: string | null;
    contact_no: number | null;
    tel_no: number | null;
    delivery_mode: string;
    landmark: string | null;
  }

  interface EditWaterStationInformationProps {
    station: WaterStation;
    params: {id: number};
}

export default async function EditWaterStationInformation (props: EditWaterStationInformationProps) {
    console.log(props.params.id, "params")
    const supabase = createServerComponentClient({ cookies });
    const {data: {session}} = await supabase.auth.getSession();

    //if not in session, direct user to the login page
    if(!session){
      redirect('/login')
    }

    //fetching the water station
    const {data: station} = await supabase.from("water_refilling_station").select().eq('id', props.params.id)
   
    return (
      <div>
        {station?.map((station) => (
          <ul key={station.id}>
            <li>{station.station_name}</li>
          </ul>
        ))}
      </div>
    )
  
}

3 Replies

Marchy
Can you try removing the redirect?
Auth should generally be handled in middleware, there's a guide here for setting up Next with SupaBase
https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs#nextjs-middleware
JennOP
This was my middleware import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse, NextRequest } from 'next/server'

export async function middleware(req: NextRequest) {
const res = NextResponse.next()
const supabase = createMiddlewareClient({ req, res })
await supabase.auth.getSession()
return res
}

//Note that we really only need this to run on authenticated routes,
//so we're using path matcher to ensure this code runs only for Home and Profile pages.
// export const config = {
// matcher: ['/', '/waterTypes'],
// };