Provide a ES Module compatible import for @builder.io/react

[martypdx]

I'm integrating builder.io/react into an astro project. For the server-side build, it uses straight NodeJS ES Module import, but the builder.io package exposes CJS.

Steps to recreate for vanilla NodeJS:

Create a new directory and run the following setup:

npm init --yes
npm i @builder.io/react

Add the following to package.json:

  "type": "module",

Create an index.js with this code:

import { builder } from '@builder.io/react';
console.log('builder is', builder);

Run via:

> node index.js

And gets this error:

import { builder } from '@builder.io/react';
         ^^^^^^^
SyntaxError: Named export 'builder' not found. The requested module '@builder.io/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 '@builder.io/react';
const { builder } = pkg;

Correcting the code as suggested fixes the problem:

> node index.js
builder is Builder {
...
...

But now that import statement doesn't work for bundled React environments. I know you don't want to break your NextJS, CRA, and browser side React builds, but can this library be packaged in a way that works for what is now standard node syntax?

[martypdx]

Still an issue, this library won't work when used with node.js' import.

I tried monkeying with the package.json to use the .es5 build as the main and set "type": "module". But that build (on line 15) uses eval("require") when Builder.isServer true. But server doesn't mean cjs anymore

[martypdx]

I noticed from this issue on astro that there is some effort to make the builder solid sdk ESM compatible. Any idea when this might land in react sdk?

[samijaber]

I noticed from this issue on astro that there is some effort to make the builder solid sdk ESM compatible. Any idea when this might land in react sdk?

@martypdx All of our new SDKs (Vue, Solid, React-Native & Svelte) are ESM compatible, but the React SDK is on a separate architecture. We are planning on migrating the React SDK over to the new format, but we do not have a timeline for when that will happen yet.

[samijaber]

Update: our Gen 2 React SDK is now stable at v1.0, and provided as an ES module. https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/react