Skip to content

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

Open
fantonangeli wants to merge 2 commits into
serverlessworkflow:mainfrom
fantonangeli:issue-187-bug-Dynamic-require-error-from-bundled-use-sync-external-store-shim
Open

fix #187: Dynamic require error from bundled use-sync-external-store shim#188
fantonangeli wants to merge 2 commits into
serverlessworkflow:mainfrom
fantonangeli:issue-187-bug-Dynamic-require-error-from-bundled-use-sync-external-store-shim

Conversation

@fantonangeli

Copy link
Copy Markdown
Member

Closes #187

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.

How to test

  1. Build the @serverlessworkflow/diagram-editor package
  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 

No CJS is found
5. Load the Diagram Editor in the browser.
6. The Diagram Editor is not loaded

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>
Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>
Copilot AI review requested due to automatic review settings June 19, 2026 15:37
@netlify

netlify Bot commented Jun 19, 2026

Copy link
Copy Markdown

Deploy Preview for swf-editor ready!

Name Link
🔨 Latest commit 52df8e2
🔍 Latest deploy log https://app.netlify.com/projects/swf-editor/deploys/6a356238ac8ea70008da3513
😎 Deploy Preview https://deploy-preview-188--swf-editor.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses #187 by preventing use-sync-external-store from being bundled into the @serverlessworkflow/diagram-editor ESM build (avoiding the CommonJS shim path that can trigger require("react") at runtime in browser-only ESM consumers). It also ensures the package is available at runtime by declaring it as a direct dependency.

Changes:

  • Mark use-sync-external-store (including subpaths) as Rollup external in the diagram editor’s Vite library build.
  • Add use-sync-external-store as a runtime dependency of @serverlessworkflow/diagram-editor.
  • Add the dependency to the pnpm catalog and lockfile, and include a changeset for release.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated no comments.

Show a summary per file
File Description
pnpm-workspace.yaml Adds use-sync-external-store to the shared pnpm catalog for consistent versioning.
pnpm-lock.yaml Locks use-sync-external-store@1.6.0 and records it under the diagram editor importer.
packages/serverless-workflow-diagram-editor/vite.config.ts Externalizes use-sync-external-store to avoid bundling the CJS shim into the ESM output.
packages/serverless-workflow-diagram-editor/package.json Declares use-sync-external-store as a runtime dependency.
.changeset/fix-cjs-use-sync-external-store-bundle.md Adds a release note describing the ESM compatibility fix and dependency change.
Files not reviewed (1)
  • pnpm-lock.yaml: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants