Issue when sharing a treeshaked library

I have the following setup: Application A loads a button from react-bootstrap like this: import Button from "react-bootstrap/Button" In shared I have: "shared": {"react-bootstrap" : {}} I can see in the bundle that only the code for Button is bundled and shared and not the entire library which is ok.

I have application B which loads a modal from react-bootstrap like this: import { Modal } from "react-bootsrap" In shared I have: "shared": {"react-bootstrap" : {}} I can see that the entire “react-bootstrap” library is bundled because of the unoptimized import which is ok.

I run application A and dynamically import application B and render it inside it. Expectation: Application A doesn’t provide the Modal so application B will load its own chunk which contains it and take it from there. Reality: Application B cannot find Modal and is not rendered correctly.

If i change the import in application A to import { Button } from "react-bootstrap" then the sharing happens correctly. Does that mean that only entire libraries can be shared and not pieces of them?

[alex-vukov]

Thank you @jacob-ebey for the suggestion! Sharing single components works, however it brings the inconvenience that you have to track each component you have used in the code in order to add it to “shared”. Another option that I found useful is to use "shared": {"react-bootstrap/": {}}. Adding the trailing slash at the end shares all the single components in the folder at once but if you use only 3-4 of them the other (probably around 80) unused chunks take extra space on the server. So I guess I am looking for something in the middle between the two options i.e. “share only those components from a library which are used by my application without having to specify them one by one”. Maybe this is more of a feature request but I believe it would be helpful

[mjhenkes]

Thanks @ScriptedAlchemy ! What book are you referring to?

edit: Derp, never mind i found it 😃