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
-
Clone the repro:
git clone https://github.com/mogusbi-motech/cal-com-atom-bundling-issue.git
cd cal-com-atom-bundling-issue
-
Check out the failing branch:
-
Install dependencies:
-
Start the app:
-
Open the local Next.js URL.
-
Submit the form with valid Cal.com values:
- Client ID
- API URL, for example
https://api.cal.com/v2
- Username
- Event slug
-
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
Issue Summary
@calcom/atoms@2.11.0fails 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 evaluatesdayjs.tz.guess()beforedayjs.tzis available.Steps to Reproduce
Clone the repro:
git clone https://github.com/mogusbi-motech/cal-com-atom-bundling-issue.git cd cal-com-atom-bundling-issueCheck out the failing branch:
Install dependencies:
Start the app:
Open the local Next.js URL.
Submit the form with valid Cal.com values:
https://api.cal.com/v2Click
Open calendar modal.For comparison, the same flow works on:
Actual Results
@calcom/atoms@2.11.0.Before reaching this error,
2.11.0also required adding Stripe packages because the top-level Atoms import pulls in payment modules:Installing the Stripe dependencies resolves that module-resolution error, but the timezone runtime error remains.
Expected Results
CalProviderandBookerfrom@calcom/atomsshould render the Booker atom successfully.Technical details
mainworking-2.6.0@calcom/atoms@2.11.0@calcom/atoms@2.6.014.2.3518.3.1v24.14.111.1.0During incremental upgrade testing, these version ranges showed different failures:
2.6.02.7.0to2.8.2Cannot read properties of null (reading 'get').2.8.3to2.8.9react-use/lib/usePrevious:TypeError: react_use_lib_usePrevious__WEBPACK_IMPORTED_MODULE_3__ is not a function.2.9.0to2.11.0dist/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.0working-2.6.0: works with@calcom/atoms@2.6.0The README contains the same reproduction notes:
https://github.com/mogusbi-motech/cal-com-atom-bundling-issue/blob/main/README.md