fix(build): emit ESM bundle so consumers can tree-shake externals#767
Open
jackiejou wants to merge 1 commit into
Open
fix(build): emit ESM bundle so consumers can tree-shake externals#767jackiejou wants to merge 1 commit into
jackiejou wants to merge 1 commit into
Conversation
Switch webpack output to module format with ESM externals. The bundle previously loaded externals via require(), which consumer bundlers treat as opaque namespace access and retain entire package barrels. Named imports restore tree-shaking. Add sideEffects since dist/annotations.js assigns globalThis.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Switches the webpack build to emit an ES module bundle so that consumer bundlers can tree-shake the
@box/*packages this library declares as externals.Since #743 the published bundle loaded its externals via
require()calls. A consuming bundler treatsrequire("@box/blueprint-web")as opaque namespace access and marks the entire package barrel as used, so unrelated Blueprint components (Table, Calendar, GridList, and others) were retained in consumer bundles even though this library uses only two Blueprint exports.Changes
scripts/webpack.config.js: emit ESM output (experiments.outputModule,output.library.type: 'module') with per-request external types:@box/*and@tiptap/*packages are externalized asmodule, so the bundle contains named ESM imports (import { BlueprintModernizationProvider, TooltipProvider } from '@box/blueprint-web') that downstream bundlers can tree-shake.commonjs. Withmoduleexternals webpack assumes the external is spec ESM at build time and compiles away Babel's__esModuleinterop from bundled CJS code (e.g. react-tether); consumers that provide a CJS-shaped react then crash onnamespace.defaultaccess during module evaluation, which leavesglobalThis.BoxAnnotationsunassigned.index.js: import the default export fromdist/annotations.jsdirectly. The bundle now has a realexport default; previously the entry re-exported an undeclared identifier resolved from the global at runtime.package.json: addsideEffects../dist/annotations.jsis listed because it assignsglobalThis.BoxAnnotations, which is how existing consumers access the library; without the entry a consumer bundler could prune the import.Testing
tscand eslint passNotes
dist/annotations.jsvia a classic script tag is not supported by the ESM output. That path has been broken since feat(popup): Add threaded annotations v2 popup and thread view #743 (the bundle contained barerequire()calls that no browser script context could satisfy); bundler consumption is unaffected.