Skip to content

bug: Dynamic require error from bundled use-sync-external-store shim #187

@fantonangeli

Description

@fantonangeli

Describe the Bug

The diagram-editor package currently bundles the use-sync-external-store as CJS. In some ESM/browser consumers, this can result in a CJS runtime call to require("react"), which fails in browser-only environments with:

Dynamic require of "react" is not supported

This issue prevents the entire package to be loaded by the browser.
This is related to the use-sync-external-store ESM compatibility issue discussed in react/react#24590.

Steps to reproduce

  1. Build the @serverlessworkflow/diagram-editor package as an ESM bundle.
  2. Inspect the generated dist/index.js.
  3. Observe the cjs path from the dist:
$ grep -n 'use-sync-external-store' packages/serverless-workflow-diagram-editor/dist/index.js 
4221://#region ../../node_modules/.pnpm/use-sync-external-store@1.6.0_react@19.2.7/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
4266:			d || a.startTransition === void 0 || (d = !0, console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
  1. Consume the package from a browser-only ESM application or another ESM bundle.
  2. Load the Diagram Editor in the browser.
  3. The Diagram Editor is not loaded

Expected Behavior

The package should not bundle the CommonJS libraries shim into the ESM dist/index.js, and the Diagram Editor should load successfully in the browser.

Editor Version

0.0.0

Platform

Web / Browser

Additional Context

No response

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No fields configured for Bug.

Projects

Status
In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions