pharos
pharos copied to clipboard
Add exports field to package.json
The problem Webpack 5 module federation dependency sharing works best with imports from a package's root entry file. Currently to share Pharos, folks would need to list the individual components they'd like to share as their imports go deep into the package:
import '@ithaka/pharos/lib/components/modal/pharos-modal';
The solution Address #3 and then add an exports field to the package.json to define the main entry point and encapsulate the package to prevent other entry points.
"exports": {
".": "./lib/index.js",
"./lib": "./lib/index.js",
"./lib/index": "./lib/index.js",
"./lib/index.js": "./lib/index.js",
"./package.json": "./package.json",
"./custom-elements.json": "./custom-elements.json"
}
The first entry would allow consumers to import component definitions in this way:
import { PharosButton } from '@ithaka/pharos';
Thus they would only need to add @ithaka/pharos
as a shared dependency in their MFE configuration.
Alternatives considered N/A.
Additional information This will likely be a breaking change as only the entry points defined in the field would be allowed.
Are there any considerations we need to make for our React wrapper components?
Well an entry point can only be a single file/location. If we want the same experience with sharing the React versions we'd need to define a separate package (something like @ithaka/pharos-react
) with its own exports defined. That would be the time to make such a change given #3 and this being breaking changes.
Learned today that modules shared via ModuleFederation are unable to be tree shaken. So it's worth noting that if we go this route the entirety of the @ithaka/pharos
module will be bundled and shared. Need to think more on the tradeoffs between the different approaches, but just wanted to raise the important note.
We need to wait until TypeScript supports finding type definitions for modified export subpaths with using the exports
field. 4.5 seems to support this functionality but is still in beta and the feature is buggy.
seems like this should be possible now https://github.com/microsoft/TypeScript/issues/33079
Resolved by #472