Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add exports field to package.json #212

Closed
Niznikr opened this issue Sep 2, 2021 · 6 comments · Fixed by #472
Closed

Add exports field to package.json #212

Niznikr opened this issue Sep 2, 2021 · 6 comments · Fixed by #472

Comments

@Niznikr
Copy link
Collaborator

Niznikr commented Sep 2, 2021

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.

@eslawski
Copy link
Contributor

eslawski commented Sep 2, 2021

Are there any considerations we need to make for our React wrapper components?

@Niznikr
Copy link
Collaborator Author

Niznikr commented Sep 2, 2021

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.

@eslawski
Copy link
Contributor

eslawski commented Sep 2, 2021

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.

@Niznikr Niznikr added this to the @ithaka/pharos v11.0.0 milestone Sep 17, 2021
@Niznikr Niznikr added the status/has ticket This issue will be addressed by the maintainers label Oct 12, 2021
@Niznikr Niznikr removed this from the @ithaka/pharos v11.0.0 milestone Oct 28, 2021
@Niznikr
Copy link
Collaborator Author

Niznikr commented Oct 28, 2021

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.

@daneah daneah removed the status/has ticket This issue will be addressed by the maintainers label Nov 13, 2022
@chrisjbrown
Copy link
Contributor

seems like this should be possible now
microsoft/TypeScript#33079

@daneah daneah added this to the Pharos v13 milestone Jan 20, 2023
@daneah
Copy link
Member

daneah commented Aug 20, 2023

Resolved by #472

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

Successfully merging a pull request may close this issue.

4 participants