Skip to content

@calcom/atoms crashes in Next.js App Router beyond version 2.6.0 #29341

@mogusbi-motech

Description

@mogusbi-motech

Issue Summary

@calcom/atoms@2.11.0 fails at runtime in a minimal Next.js App Router project when rendering the Booker atom from a client-only modal.

The same repro works on @calcom/atoms@2.6.0. The only intended difference between the working and failing branches is the package version and resulting lockfile changes.

Repro repo: https://github.com/mogusbi-motech/cal-com-atom-bundling-issue

Failing branch using @calcom/atoms@2.11.0:
https://github.com/mogusbi-motech/cal-com-atom-bundling-issue/tree/main

Working comparison branch using @calcom/atoms@2.6.0:
https://github.com/mogusbi-motech/cal-com-atom-bundling-issue/tree/working-2.6.0

The current failure appears to come from @calcom/atoms/dist/vendor/timezone-constants.js, which evaluates dayjs.tz.guess() before dayjs.tz is available.

Steps to Reproduce

  1. Clone the repro:

    git clone https://github.com/mogusbi-motech/cal-com-atom-bundling-issue.git
    cd cal-com-atom-bundling-issue
  2. Check out the failing branch:

    git checkout main
  3. Install dependencies:

    pnpm install
  4. Start the app:

    pnpm dev
  5. Open the local Next.js URL.

  6. Submit the form with valid Cal.com values:

    • Client ID
    • API URL, for example https://api.cal.com/v2
    • Username
    • Event slug
  7. Click Open calendar modal.

For comparison, the same flow works on:

git checkout working-2.6.0
pnpm install
pnpm dev

Actual Results

  • The calendar modal fails to load on @calcom/atoms@2.11.0.
  • The browser shows:
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'guess')

Call Stack
eval
node_modules/@calcom/atoms/dist/vendor/timezone-constants.js (4:21)

Before reaching this error, 2.11.0 also required adding Stripe packages because the top-level Atoms import pulls in payment modules:

Module not found: Can't resolve '@stripe/react-stripe-js'

Installing the Stripe dependencies resolves that module-resolution error, but the timezone runtime error remains.

Expected Results

  • Importing and rendering CalProvider and Booker from @calcom/atoms should render the Booker atom successfully.
  • Optional payment modules should not be required when the consuming app is not using payments.
  • Package modules should not evaluate browser/runtime-sensitive values at module scope in a way that crashes before Booker renders.

Technical details

During incremental upgrade testing, these version ranges showed different failures:

Version range Observation
2.6.0 Works.
2.7.0 to 2.8.2 Router/search-params runtime issue in the Booker path, with a failure like Cannot read properties of null (reading 'get').
2.8.3 to 2.8.9 Runtime failure from react-use/lib/usePrevious: TypeError: react_use_lib_usePrevious__WEBPACK_IMPORTED_MODULE_3__ is not a function.
2.9.0 to 2.11.0 Runtime failure from dist/vendor/timezone-constants.js: Cannot read properties of undefined (reading 'guess').

Evidence

The repro contains two branches that should make the difference easy to verify:

  • main: fails with @calcom/atoms@2.11.0
  • working-2.6.0: works with @calcom/atoms@2.6.0

The README contains the same reproduction notes:
https://github.com/mogusbi-motech/cal-com-atom-bundling-issue/blob/main/README.md

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐛 bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions