Skip to content

fix: Add browser field in package.json so react-dom/server stays out of browser bundles#343

Merged
guzmanvig merged 1 commit into
Lattice-Automation:developfrom
smeng9:fix/browser-build-no-ssr
Jul 17, 2026
Merged

fix: Add browser field in package.json so react-dom/server stays out of browser bundles#343
guzmanvig merged 1 commit into
Lattice-Automation:developfrom
smeng9:fix/browser-build-no-ssr

Conversation

@smeng9

@smeng9 smeng9 commented Jul 1, 2026

Copy link
Copy Markdown

Fixes: #293
Replaces: #294

With the fix in #294 we still encounter issues in module-federation, and module-federation loader crashes because it cannot provide react-dom/server in the browser.
Module federation's remote build will try to hoist all reqire() dependencies in the code, (regardless of lazy or not, see https://npmx.dev/package-code/seqviz/v/3.10.22/dist%2Findex.js#L7137) and we shouldn't include the SSR react-dom/server in the browser build.

It is better to create a browser only build with no react-dom/server following the option B in #293

…bundles

The npm entry (dist/index.js) externalizes node_modules, so the lazy
require("react-dom/server") in Viewer.renderToString survived into the shipped
bundle. Any bundler resolving seqviz via main was then forced to resolve
react-dom/server, pulling Node-only SSR code into browser bundles (#293).

- Extract shared render/setState logic into src/baseViewer.ts (createBaseViewer;
  imports only react + react-dom/client, never react-dom/server).
- Rebuild the node entry (src/index.ts) on the shared core, keeping the lazy
  require("react-dom/server") for renderToString. Output behavior unchanged.
- Add src/index.browser.ts: same exports, but Viewer returns only
  { render, setState } and has no path to react-dom/server.
- webpack: rename npmBuild -> nodeBuild, add browserBuild -> dist/index.browser.js.
- package.json: add browser field + exports map with per-condition types
  (browser -> dist/index.browser.d.ts, no renderToString). Legacy main/browser/
  types/unpkg fields retained; ./dist/* keeps deep imports working.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@smeng9

smeng9 commented Jul 1, 2026

Copy link
Copy Markdown
Author

Additionally we can consider just reexporting the React components, and dropping the Viewer function in the browser build

@guzmanvig

Copy link
Copy Markdown
Collaborator

@jjti any thoughts on this?

@smeng9

smeng9 commented Jul 17, 2026

Copy link
Copy Markdown
Author

Hi @guzmanvig @jjti

How do we want to move forward so we only use pure browser package on browser side?

@guzmanvig

Copy link
Copy Markdown
Collaborator

Hi @guzmanvig @jjti

How do we want to move forward so we only use pure browser package on browser side?

Hey, sorry for the delay on this. I'll be merging this and a few other oustanding PRs and making a release today

@guzmanvig
guzmanvig merged commit a7b3a78 into Lattice-Automation:develop Jul 17, 2026
1 check passed
@guzmanvig

Copy link
Copy Markdown
Collaborator

@smeng9 just released a new version that contains this and other fixes (https://github.com/Lattice-Automation/seqviz/releases/tag/3.10.24)

@smeng9

smeng9 commented Jul 18, 2026

Copy link
Copy Markdown
Author

Thanks!

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.

import "seqviz" breaks in Vite (browser): util.TextEncoder / react-dom/server loaded in client

2 participants