fix: define process.env variables in atoms vite config to prevent 'process is undefined' errors

[ibex088]

What does this PR do?

Fixes the "process is undefined" error that occurs when using @calcom/atoms in Vite projects by defining all process.env variables used by the bundled code at build time.

• Fixes fix: process undefined #24213
• Fixes CAL-6500

Problem

When users install and use @calcom/atoms in their Vite projects, they encounter a runtime error: Uncaught ReferenceError: process is not defined. This happens because:

1. The atoms package bundles Next.js code and other dependencies that reference process.env variables
2. Vite doesn't provide a process global by default (unlike webpack/Next.js)
3. The bundled output contains references like process.env.NODE_ENV, process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA, etc.

Previously, users had to add a workaround to their own vite.config:

define: {
  "process.env": "{}"
}

This PR fixes the issue at the source by defining all necessary process.env variables in the atoms build configuration.

Solution

How It Works

The define option in Vite's config performs static replacement at build time - it literally replaces the text in the code before bundling. For example, process.env.NODE_ENV becomes "production" in the final bundle, eliminating any runtime dependency on the process object.

Example transformation:

Before (in source code):

if (process.env.NODE_ENV !== "production") {
  console.warn("Development warning")
}

After build (in bundled atoms):

if ("production" !== "production") {
  console.warn("Development warning")
}

Which then gets optimized away by the minifier since the condition is always false. The published atoms package has zero runtime dependencies on process - it's all static values!

Variables Defined

Added comprehensive process.env variable definitions to the Vite config's define section:

1. process.env.NODE_ENV - Set to the build mode (production/development)

• Used throughout React and many libraries for conditional logic
• Example: if (process.env.NODE_ENV !== "production") { console.warn(...) }

2. process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA - Git commit hash

• Used for versioning in the atoms code
• Helps with cache busting for assets

3. process.env.NEXT_PUBLIC_CALCOM_VERSION - Cal.com version number

• Also used for versioning and cache busting
• Example from the code: https://app.cal.com/icons/sprite.svg?v=${process.env.NEXT_PUBLIC_CALCOM_VERSION}

4. Next.js Internal Flags (__NEXT_ROUTER_BASEPATH, __NEXT_I18N_SUPPORT, __NEXT_MANUAL_TRAILING_SLASH, __NEXT_TRAILING_SLASH)

• These are Next.js router configuration flags that got bundled into atoms
• Set to false or "" because atoms doesn't use Next.js routing
• They're in the bundled code but not actually needed for atoms functionality

5. "process.env": "{}" - The catch-all

• This is placed last as a fallback
• Replaces any remaining process.env references with an empty object
• Prevents errors if we missed any specific variables

Order Matters!

The specific variables must come before the catch-all "process.env": "{}" because Vite processes them in order. If the catch-all was first, it would replace everything and the specific values wouldn't work.

Why This Is Safe for All Environments

1. Build-time replacement only affects the atoms bundle

• These define values only apply when building the @calcom/atoms package itself
• They don't affect how users' projects are built
• The atoms bundle that gets published to npm has all process.env references already replaced with static values

2. Works in all environments

• Vite projects: No process object needed - everything is already replaced with static values
• Next.js projects: Still works perfectly because Next.js provides its own process.env handling, but it's not needed since the values are already baked into the atoms bundle
• Create React App / webpack: Same story - the bundled atoms code has no runtime process dependencies

3. No conflicts

• The atoms package doesn't read process.env at runtime anymore
• It only contains the static values that were replaced during the atoms build
• Your application's own process.env handling is completely separate and unaffected

What About import.meta.env.VITE_* Variables?

You might notice that atoms code also uses import.meta.env.VITE_BOOKER_EMBED_OAUTH_CLIENT_ID and import.meta.env.VITE_BOOKER_EMBED_API_URL. These are NOT included in this fix because:

1. They use Vite's native import.meta.env - not process.env
2. They should be provided by consuming applications - each app using atoms has different OAuth client IDs and API URLs
3. They work correctly in Vite projects - users set them in their own .env files
4. They're meant to be configurable - unlike the process.env variables which are from bundled Next.js code and need static values

The process.env variables we're defining are different - they're from Next.js code that got bundled into atoms and aren't meant to be user-configurable.

How should this be tested?

1. Create a new Vite project:

   npm create vite@latest test-atoms -- --template react-ts
   cd test-atoms
   npm install @calcom/atoms

2. Use atoms in your app:

   import '@calcom/atoms/globals.min.css'
   import { CalProvider } from '@calcom/atoms'
   
   function App() {
     return (
       <CalProvider clientId="your-client-id" options={{ apiUrl: "https://api.cal.com/v2" }}>
         <div>Test atoms</div>
       </CalProvider>
     )
   }

3. Run the dev server:

   npm run dev

4. Expected result: The app should load without "process is undefined" errors in the browser console

Test repository: https://github.com/ibex088/vite-test - Demonstrates the issue with current published version

Mandatory Tasks

• I have self-reviewed the code
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change - N/A (This is an internal build fix, no user-facing docs needed)
• I confirm automated tests are in place that prove my fix is effective or that my feature works - Manual testing performed

Checklist

• I have read the contributing guide
• My code follows the style guidelines of this project
• I have commented my code, particularly in hard-to-understand areas
• I have checked if my changes generate no new warnings

---

Link to Devin run: https://app.devin.ai/sessions/5c92cb6a95274cd08340f670739ad744
Requested by: @SomayChauhan (somay@cal.com)

[linear]

CAL-6500 fix: process undefined

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
cal	Ignored			Oct 24, 2025 7:29am
cal-eu	Ignored			Oct 24, 2025 7:29am

[ibex088]

tested it in a local vite project, works 👍

[cubic-dev-ai]

No issues found across 1 file

[ibex088]

How to Test:

1. Navigate to the cal.com project.

2. Check out this PR

3. Go to the cal.com/packages/platform/atoms directory and run:

   • yarn dev-on
   • yarn build

4. In the cal.com/packages/platform/atoms directory, run pwd to get the absolute path to /atoms.

5. Clone the repository:
   git clone https://github.com/ibex088/vite-test.git

6. Next, go to your Vite project and open the package.json file.
   Update the @calcom/atoms dependency with the correct relative path. Replace the file: path with the relative path to your atoms. Tip: You can ask AI to do this for you.

The final entry will look something like this:

   "@calcom/atoms": "file:../cal.com/packages/platform/atoms"

[github-actions]

E2E results are ready!

• Workflow #84945.1 latest results