Webpack setup for code-split chunks imported from CDN

Question

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 -

1. 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 .../>;
   }
   

2. The core components library, which we plan to host on our servers. We will keep on updating it with new fixes and features.

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?

Dulcie

so if you could pass server path in runtime it would solve everything? – Oscillograph

Yes, see my answer below. – Dulcie

Answer 1

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.

Dulcie