vercel building error. nextjs and supabase

Question

error on vercel is like this:

TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:399:5)
    at new URL (node:internal/url:560:13)
    at new SupabaseClient (/vercel/path0/.next/server/chunks/591.js:7054:41)
    at createClient (/vercel/path0/.next/server/chunks/591.js:7256:12)
    at 978 (/vercel/path0/.next/server/app/auth/page.js:445:39)
    at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:43)
    at M (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:24:46)
    at ma (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:28:324)
    at Object.<anonymous> (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:31:63)
    at JSON.parse (<anonymous>) {
  input: '"https://xdqvbnclquqydqsfmfff.supabase.co"/auth/v1',
  code: 'ERR_INVALID_URL'
}
- info Generating static pages (2/9)
Error occurred prerendering page "/auth". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:399:5)
    at new URL (node:internal/url:560:13)
    at new SupabaseClient (/vercel/path0/.next/server/chunks/591.js:7054:41)
    at createClient (/vercel/path0/.next/server/chunks/591.js:7256:12)
    at 978 (/vercel/path0/.next/server/app/auth/page.js:445:39)
    at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:43)
    at M (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:24:46)
    at ma (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:28:324)
    at Object.<anonymous> (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:31:63)
    at JSON.parse (<anonymous>)
- info Generating static pages (4/9)
- info Generating static pages (6/9)
- info Generating static pages (9/9)
> Export encountered errors on following paths:
    /auth/page: /auth
Error: Command "npm run build" exited with 1

and I have the github repository: https://github.com/bsiku3622/classmuse-web-nextjs

here is auth/page.tsx code

"use client";

import React, { useState } from "react";
import { FaLock, FaLockOpen } from "react-icons/fa";
import { authInstance } from "../../lib/supabase";
import classNames from "classnames";
import { useFormFields } from "../../lib/utils";
import { useMessage } from "../../lib/message";

type FormFieldProps = {
  email: string;
  password: string;
};

type SupabaseAuthPayload = FormFieldProps; // type alias

const FORM_VALUES: FormFieldProps = {
  email: "",
  password: "",
};

const Auth = () => {
  const [isSignIn, setIsSignIn] = useState(true);
  const [loading, setLoading] = useState(false);

  const [values, handleChange, resetFormFields] =
    useFormFields<FormFieldProps>(FORM_VALUES);

  const { messages, handleMessage } = useMessage();

  // sign-up a user with provided details
  const signUp = async (payload: SupabaseAuthPayload) => {
    try {
      setLoading(true);
      const { error } = await authInstance.signUp(payload);
      if (error) {
        console.log(error);

        handleMessage?.({ message: error.message, type: "error" });
      } else {
        handleMessage?.({
          payload:
            "Signup successful. Please check your inbox for a confirmation email!",
          type: "success",
        });
      }
    } catch (error: any) {
      console.log(error);
      handleMessage?.({
        message: error.error_description || error,
        type: "error",
      });
    } finally {
      setLoading(false);
    }
  };

  // sign-in a user with provided details
  const signIn = async (payload: SupabaseAuthPayload) => {
    try {
      setLoading(true);
      const { error } = await authInstance.signInWithPassword(payload);
      if (error) {
        console.log(error);
        handleMessage?.({ message: error.message, type: "error" });
      } else {
        handleMessage?.({
          message: "Log in successful. I'll redirect you once I'm done",
          type: "success",
        });
      }
    } catch (error: any) {
      console.log(error);
      handleMessage?.({
        message: error.error_description || error,
        type: "error",
      });
    } finally {
      setLoading(false);
    }
  };

  // Form submit handler to call the above function
  const handleSumbit = (event: React.FormEvent) => {
    event.preventDefault();
    isSignIn ? signIn(values) : signUp(values);
    resetFormFields();
  };

  return (
    // eslint-disable-next-line react/jsx-key
    <div className="container px-5 py-10 mx-auto max-w-2xl">
      <div className="w-full text-center mb-4 flex flex-col place-items-center">
        {isSignIn ? (
          <FaLockOpen className="w-6 h-6" />
        ) : (
          <FaLock className="w-6 h-6" />
        )}
        <h1 className="text-2xl md:text-4xl text-gray-700 font-semibold">
          {isSignIn ? "Log In" : "Sign Up"}
        </h1>
      </div>
      {messages &&
        messages.map((message, index) => (
          <div
            key={index}
            className={classNames(
              "shadow-md rounded px-3 py-2 text-shadow transition-all mt-2 text-center",
              message.type === "error"
                ? "bg-red-500 text-white"
                : message.type === "success"
                ? "bg-green-300 text-gray-800"
                : "bg-gray-100 text-gray-800"
            )}
          >
            {message.message}
          </div>
        ))}
      <form
        onSubmit={handleSumbit}
        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
      >
        <div className="mb-4">
          <label
            className="block text-gray-700 text-sm font-bold mb-2"
            htmlFor="email"
          >
            Email
          </label>
          <input
            className="shadow appearance-none border border-black-500 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="email"
            name="email"
            type="email"
            placeholder="Your Email"
            required
            value={values.email}
            onChange={handleChange}
          />
        </div>
        <div className="mb-6">
          <label
            className="block text-gray-700 text-sm font-bold mb-2"
            htmlFor="password"
          >
            Password
          </label>
          <input
            className="shadow appearance-none border border-black-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
            id="password"
            name="password"
            type="password"
            placeholder="Your password"
            required
            value={values.password}
            onChange={handleChange}
          />
        </div>
        <div className="flex gap-2">
          <button
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            type="submit"
          >
            {isSignIn ? "Log In" : "Sign Up"}
          </button>
          <div className="flex-1 text-right">
            <small className="block text-gray-600">
              {isSignIn ? "Not a member yet?" : "Already a member?"}{" "}
            </small>
            <a
              className="block font-semibold"
              href=""
              onClick={(e) => {
                e.preventDefault();
                setIsSignIn(!isSignIn);
              }}
            >
              {isSignIn ? "Sign Up" : "Log In"}
            </a>
          </div>
        </div>
      </form>
      {loading && (
        <div className="shadow-md rounded px-3 py-2 text-shadow transition-all mt-2 text-center">
          Loading...
        </div>
      )}
    </div>
  );
};

export default Auth;

and lib/message/index.ts

export * from "./message.types";
export * from "./messageContext";
export * from "./useMessage";

and message.types.ts

export type MessageType = "default" | "success" | "error";

export type MessageProps = {
  type: MessageType;
  message: string;
};

and messageContext.tsx

"use client";

import { createContext, useState } from "react";
import { MessageProps } from "./message.types";

export type MessageContextProps = {
  messages: MessageProps[];
  handleMessage: (MessageProps: any) => void;
};

export const MessageContext = createContext<Partial<MessageContextProps>>({});

export const MessageProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [messages, setMessages] = useState<MessageProps[]>([]);

  const handleMessage = (message: MessageProps) => {
    setMessages((prevMessages) => prevMessages.concat([message]));
    setTimeout(() => {
      setMessages((prevMessages) => prevMessages.slice(1));
    }, 5000);
  };

  return (
    <MessageContext.Provider
      value={{
        messages,
        handleMessage,
      }}
    >
      {children}
    </MessageContext.Provider>
  );
};

and last, useMessage.tsx

import { useContext } from "react";
import { MessageContext } from "./messageContext";

export const useMessage = () => {
  const context = useContext(MessageContext);

  if (context === undefined) {
    throw new Error("useMessage must be used within a MessageContext.Provider");
  }

  return context;
};

i connected supabase with lib/supabase/index.ts and lib/supabase/supabase.ts index.ts : export * from "./supabase"; supabase.ts :

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL || "",
  process.env.NEXT_PUBLIC_ANON_KEY || ""
);

export const supabaseInstance = supabase;
export const authInstance = supabase.auth;

also i have lib/utils.ts here is the code:

import { useState } from "react";

export const useFormFields = <T>(
  initialValues: T
): [T, (event: React.ChangeEvent<HTMLInputElement>) => void, () => void] => {
  const [values, setValues] = useState<T>(initialValues);
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.persist();
    const { target } = event;
    const { name, value } = target;
    setValues({ ...values, [name]: value });
  };
  const resetFormFields = () => setValues(initialValues);
  return [values, handleChange, resetFormFields];
};

it works when i use npm run dev. but in vercel, it does not work.

i installed supabase-vercel in vercel from here: https://vercel.com/integrations/supabase and i also added vercel page url on supabase redirect's url like this: supabase screenshot

what can i do for it?

Answer 1

I solved it by setting the enviroments with no "" and setting the build script well like next build.