Build error in Astro with @calcom/embed-react

[davlet61]

Issue Summary

Embedding calcom in React component within an Astro application throws an error during build:

import { getCalApi } from '@calcom/embed-react';
         ^^^^^^^^^
SyntaxError: Named export 'getCalApi' not found. The requested module '@calcom/embed-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@calcom/embed-react';
const { getCalApi } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
    at async generatePages (file:///Users/dy/Desktop/PROJECTS/glassno/node_modules/astro/dist/core/build/generate.js:63:20)
    at async staticBuild (file:///Users/dy/Desktop/PROJECTS/glassno/node_modules/astro/dist/core/build/static-build.js:75:7)
    at async AstroBuilder.build (file:///Users/dy/Desktop/PROJECTS/glassno/node_modules/astro/dist/core/build/index.js:86:5)
    at async AstroBuilder.run (file:///Users/dy/Desktop/PROJECTS/glassno/node_modules/astro/dist/core/build/index.js:127:7)
    at async build (file:///Users/dy/Desktop/PROJECTS/glassno/node_modules/astro/dist/core/build/index.js:21:3)
    at async runCommand (file:///Users/dy/Desktop/PROJECTS/glassno/node_modules/astro/dist/cli/index.js:157:14)
    at async cli (file:///Users/dy/Desktop/PROJECTS/glassno/node_modules/astro/dist/cli/index.js:180:5)

It also warns on dev:

(node:56558) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

Steps to Reproduce

1. Create an Astro project : yarn create astro
2. Install react integration: yarn astro add react
3. Install embed package: yarn add @calcom/embed-react
4. Copy embed code from your Cal.com profile
5. Build

I have also checked the package in publint.dev and seems like this can be fixed simply by changing the module/import extension to .mjs

Technical details

• Node.js version: 16.18.0
• Astro version: 2.0.0

[davlet61]

I see the category is labeled as 'Self-hosting', however I was not hosting it myself.

[dosubot[bot]]

Hey @davlet61! I'm a bot designed to help with bug fixes, answer questions, and assist you while waiting for a human maintainer. Let me know how I can help!

There are two similar closed issues related to build errors with @calcom/embed-react:

1. [CAL-2184] Importing from @calcom/embed-react causes build error: This issue was closed with a pull request that updated the version for embeds that were already released ^[1].

2. Build error in Astro with @calcom/embed-react: This issue was closed without comments or a solution ^[2].

Regarding your specific issue, the error message suggests that the module is being treated as a CommonJS module, which might not support named exports as expected. The @calcom/embed-react package provides alternative import methods for compatibility with different module systems. You can try importing the package using the default export and then destructuring the getCalApi function:

import pkg from '@calcom/embed-react';
const { getCalApi } = pkg;

Additionally, ensure that your package.json is set to use ES modules by adding "type": "module" or using the .mjs extension for your files if necessary. The package does provide both CommonJS and ES module formats, so adjusting your import method should help resolve the issue ^[3].

To continue talking to Dosu, mention @dosu.

Written by @dosu, approved by dosu-customer-success

[dosubot[bot]]

Hey @davlet61! I'm a bot designed to help with bug fixes, answer questions, and assist you while waiting for a human maintainer. Let me know how I can help!

There are two similar closed issues related to build errors with @calcom/embed-react:

1. [CAL-2184] Importing from @calcom/embed-react causes build error: This issue was closed with a pull request that updated the version for embeds that were already released ^[1].

2. Build error in Astro with @calcom/embed-react: This issue was closed without comments or a solution ^[2].

Regarding your specific issue, the error message suggests that the module is being treated as a CommonJS module, which might not support named exports as expected. The @calcom/embed-react package provides alternative import methods for compatibility with different module systems. You can try importing the package using the default export and then destructuring the getCalApi function:

import pkg from '@calcom/embed-react';
const { getCalApi } = pkg;

Additionally, ensure that your package.json is set to use ES modules by adding "type": "module" or using the .mjs extension for your files if necessary. The package does provide both CommonJS and ES module formats, so adjusting your import method should help resolve the issue ^[3].

To continue talking to Dosu, mention @dosu.

Written by @dosu, approved by dosu-customer-success