We are working on a React component library. Some of the components need to updated without the need to redeploy the host app code. This is very much like say Google Maps library, where the client API is a small shell code which imports the actual Maps code at runtime, thereby allowing hot updates without any host downtime. So we plan to break up the output of this library into two portions -
Shell components library, which any host app code will use to import the shell component from. E.g.
import Notifications from 'our-shell-lib';
render(){
return <Notifications .../>;
}
In the above example, the Notifications component will download the NotificationsCore component from our server and mount it internally.
We have been able to export a single shell component and it correctly downloads the corresponding core component at run-time, using scriptjs based techniques described here.
However this breaks when the core-component uses dynamic-imports, which result in code-splitting. All the core-component files are available on the remote server, but we haven't had success with packing them in a way that a core component with dynamic imports can load its split chunk from the remote server in a server URL agnostic fashion. We don't want to hard-code the publicpath in the core bundle. We can pass the server path at runtime to the core component to help it find its dynamic imports, but haven't found a way to do so yet.
Thoughts?
Sorry for a very late response....
We were able to solve this by using __webpack_public_path__
. At the time of posting this question, there was very little documentation around this neat little feature. It allows you to set the public path used by the webpack shim (included in every webpack bundle) to resolve relative imports.
So we exported a thin wrapper function in the core library, which can be invoked by the shell component to set the public path from whichever CDN they are importing the core library.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With