search

calcom / cal.com

Scheduling infrastructure for absolutely everyone.
https://cal.com
Other
31.37k stars 7.58k forks source link

[CAL-3832] Deployment on Vercel fails #15256

Open iarthstar opened 3 months ago

iarthstar commented 3 months ago

Issue Summary

Deployment on Vercel fails on following steps from https://cal.com/docs/introduction/quick-start/self-hosting/vercel

Steps to Reproduce

  1. tried Deploy with Vercel button from cal.com README.md
  2. added env variables

  3. building of application fails ` @calcom/embed-react:build: src/index.ts (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.

    12:48:30.857 | @calcom/embed-react:build: src/index.ts (1:0) Module level directives cause errors when bundled, "use client" in "src/index.ts" was ignored. 12:48:30.961 | @calcom/embed-react:build: src/Cal.tsx (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error. 12:48:30.961 | @calcom/embed-react:build: src/Cal.tsx (1:0) Module level directives cause errors when bundled, "use client" in "src/Cal.tsx" was ignored. 12:48:30.988 | @calcom/embed-react:build: src/useEmbed.ts (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.

`

Evidence

Screenshot 2024-05-30 at 12 49 40 PM

CAL-3832

dosubot[bot] commented 3 months ago

Hey @iarthstar! I'm here to help you with your deployment issue. I can assist you with bug fixes, answer your questions, and guide you on becoming a contributor. Let's tackle this together while we wait for a human maintainer.

The deployment on Vercel fails due to build errors related to @calcom/embed-react. To resolve these errors, follow these steps:

  1. Install @calcom/embed-react Package: Ensure that the @calcom/embed-react package is installed correctly:

    npm install @calcom/embed-react

    or

    yarn add @calcom/embed-react

  2. Verify Component Usage: Ensure that your project correctly imports and uses the Cal component from @calcom/embed-react. Here is an example of how to use the Cal component:

    "use client";

import { useEffect, useRef } from "react";
import type { PrefillAndIframeAttrsConfig } from "@calcom/embed-core";
import useEmbed from "./useEmbed";

type CalProps = {
 calOrigin?: string;
 calLink: string;
 initConfig?: {
   debug?: boolean;
   uiDebug?: boolean;
 };
 namespace?: string;
 config?: PrefillAndIframeAttrsConfig;
 embedJsUrl?: string;
} & React.HTMLAttributes<HTMLDivElement>;

const Cal = function Cal(props: CalProps) {
 const { calLink, calOrigin, namespace = "", config, initConfig = {}, embedJsUrl, ...restProps } = props;
 if (!calLink) {
   throw new Error("calLink is required");
 }
 const initializedRef = useRef(false);
 const Cal = useEmbed(embedJsUrl);
 const ref = useRef<HTMLDivElement>(null);
 useEffect(() => {
   if (!Cal || initializedRef.current || !ref.current) {
     return;
   }
   initializedRef.current = true;
   const element = ref.current;
   if (namespace) {
     Cal("init", namespace, {
       ...initConfig,
       origin: calOrigin,
     });
     Cal.ns[namespace]("inline", {
       elementOrSelector: element,
       calLink,
       config,
     });
   } else {
     Cal("init", {
       ...initConfig,
       origin: calOrigin,
     });
     Cal("inline", {
       elementOrSelector: element,
       calLink,
       config,
     });
   }
 }, [Cal, calLink, config, namespace, calOrigin, initConfig]);

 if (!Cal) {
   return null;
 }

 return <div ref={ref} {...restProps} />;
};
export default Cal;

  3. Implement useEmbed Hook: Ensure that the useEmbed hook is correctly implemented:

    "use client";

import { useEffect, useState } from "react";
import EmbedSnippet from "@calcom/embed-snippet";

export default function useEmbed(embedJsUrl?: string) {
 const [globalCal, setGlobalCal] = useState<ReturnType<typeof EmbedSnippet>>();
 useEffect(() => {
   setGlobalCal(() => {
     return EmbedSnippet(embedJsUrl);
   });
   // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 return globalCal;
}

  4. Check Environment Variables: Ensure that your environment variables are correctly set up in your Vercel project settings. The @calcom/embed-react package relies on certain environment variables, as defined in the env.d.ts file:

    /// <reference types="vite/client" />

interface ImportMetaEnv {
 readonly EMBED_PUBLIC_WEBAPP_URL: string;
 readonly EMBED_PUBLIC_VERCEL_URL: string;
 readonly EMBED_PUBLIC_EMBED_LIB_URL: string;
}

interface ImportMeta {
 readonly env: ImportMetaEnv;
}

  5. Remove Unnecessary Routes: You might be encountering issues due to unnecessary routes being included in the build, which can lead to out-of-memory (OOM) errors. Cal.com provides a script to remove unnecessary directories from the build to reduce its size. Include the following script in your project:

    #!/bin/bash

# Only deploy to production
if [ "$VERCEL_ENV" != "production" ]; then exit 0; fi

checkRoute () {
 if [ "$1" != '1' ]; then rm -rf $2; fi
}

# These conditionals are used to remove directories from the build that are not needed in production
# This is to reduce the size of the build and prevent OOM errors
checkRoute "$APP_ROUTER_EVENT_TYPES_ENABLED" app/future/event-types
checkRoute "$APP_ROUTER_SETTINGS_ADMIN_ENABLED" app/future/settings/admin
checkRoute "$APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED" app/future/apps/installed
checkRoute "$APP_ROUTER_APPS_SLUG_ENABLED" app/future/apps/\[slug\]
checkRoute "$APP_ROUTER_APPS_SLUG_SETUP_ENABLED" app/future/apps/\[slug\]/setup
checkRoute "$APP_ROUTER_APPS_CATEGORIES_ENABLED" app/future/apps/categories
checkRoute "$APP_ROUTER_APPS_CATEGORIES_CATEGORY_ENABLED" app/future/apps/categories/\[category\]
checkRoute "$APP_ROUTER_WORKFLOWS_ENABLED" app/future/workflows
checkRoute "$APP_ROUTER_SETTINGS_TEAMS_ENABLED" app/future/settings/teams
checkRoute "$APP_ROUTER_GETTING_STARTED_STEP_ENABLED" app/future/getting-started
checkRoute "$APP_ROUTER_APPS_ENABLED" app/future/apps
checkRoute "$APP_ROUTER_BOOKINGS_STATUS_ENABLED" app/future/bookings
checkRoute "$APP_ROUTER_VIDEO_ENABLED" app/future/video
checkRoute "$APP_ROUTER_TEAMS_ENABLED" app/future/teams

# These are routes that don't have and environment variable to enable or disable them
# Will stop removing gradually as we test and confirm that they are working
rm -rf \
  app/future/[user]\
  app/future/auth\
  app/future/booking\
  app/future/connect-and-join\
  app/future/d\
  app/future/enterprise\
  app/future/insights\
  app/future/maintenance\
  app/future/more\
  app/future/org\
  app/future/payment\
  app/future/reschedule\
  app/future/routing-forms\
  app/future/signup\
  app/future/team

exit 1

Following these steps should help resolve the build errors and successfully deploy your application on Vercel [1][2][3][4][5].

To continue talking to Dosu, mention @dosu.

iarthstar commented 3 months ago
  1. installed packaged
  2. checked files

still same error...

@calcom/embed-react:build: src/index.ts (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.

dosubot[bot] commented 3 months ago

To resolve the build error related to sourcemaps when deploying your application on Vercel using the @calcom/embed-react package, you can modify the Vite build configuration to disable sourcemaps. This can be done by adding a vite.config.js file in your project root with the following content:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: false
  }
});

This configuration will disable the generation of sourcemaps during the build process, which should resolve the build error you are encountering on Vercel [1].

@keithwillcode, could you help with this?

To continue talking to Dosu, mention @dosu.

iarthstar commented 3 months ago

still same error

Screenshot 2024-05-30 at 2 18 49 PM
PeerRich commented 3 months ago

@hariombalhara can you look here? seems like the embed is bugging out

hariombalhara commented 3 months ago

Those embed related errors are just warnings

The real error is 'invalid rewrite found'. It usually comes when there is an env variable used in and next.config.js rewrite rule and that hasn't been defined

@iarthstar Could you check for such an env variable?

iarthstar commented 3 months ago

@hariombalhara

env variables currently added, do i need to add more ???

Screenshot 2024-05-31 at 2 28 48 PM

next.config.js needs many env vars but what rewrite needs are already provided...

Screenshot 2024-05-31 at 2 36 28 PM

let me know if I need to add any more env vars... please unblock me...

hariombalhara commented 3 months ago

I don't see NEXT_PUBLIC_API_V2_URL env variable set. You can set the default value from .env.example file image

This is a recent addition. You should also see this error in your logs early on that should inform about it being not set

Screenshot 2024-05-31 at 5 03 08 PM
iarthstar commented 3 months ago

Errors are still present but build / deployment is successful (getting 500)

Screenshot 2024-05-31 at 7 09 41 PM

And on opening deployment url, getting 500

Screenshot 2024-05-31 at 7 11 52 PM

Also NEXT_PUBLIC_API_V2_URL value in example file is http://localhost:5555/api/v2, what should it be for vercel hosting ???

iarthstar commented 3 months ago

@hariombalhara ^^^

hariombalhara commented 3 months ago

You can ingore those build errors as build is successful. As for the 500, you should check the web app logs.

For API v2 URL, you might not be deploying API v2, so any URL would work.

iarthstar commented 3 months ago
Screenshot 2024-06-03 at 3 35 13 PM

supabase postgres string is copy paste correctly... still getting this error

@hariombalhara do I need to clone the repo and perform some prisma related actions then commit and deploy on vercel ???