Search code examples
reactjswebpackdeck.glmicro-frontendh3

Using Deck.GL as Webpack external

I'm currently developing two different React applications which use Deck.GL to render two maps, each with a different type of layer. When using them as standalone they both work perfectly, however, when the two get mounted in the same parent application, the second map I visit crashes (due to loading the library two times or so it seems).

Given that, I added Deck.GL to Webpack externals of both applications and added an unpkg link to the parent application. However, this gives an "Unable to resolve 'h3'" error, so I also put h3-js in externals but it keeps searching for it on Deck.GL javascript. My next step was to import from the @deck.gl/core, @deck.gl/react, @deck.gl/layers, etc instead and only load what is needed, but I got a similar error as it was searching for 'luma' in @deck.gl/layers.

So, how do I correctly define Deck.GL as a Webpack external?

Edit:

The error I get when adding deck.gl to externals:

Unable to resolve bare specifier "h3" from https://unpkg.com/[email protected]/dist.min.js

The errors when I navigate to the second map which uses different layers: image It seems this error is launched when using Angular routing to navigate through the page, if I use simple <a href> they work perfectly because it reloads the whole page and doesn't load two instances of the library.

Solution

  • The problem was caused by incorrect webpack externals configurations and mistakes selecting what bundles to import from unpkg/jsdelivr. If anyone runs into the same problem just look at Deck's own website:

     config.externals = { 
   'highlight.js': 'hljs', 
   'h3-js': 'h3', 
   'deck.gl': 'deck', 
   '@deck.gl/aggregation-layers': 'deck', 
   '@deck.gl/core': 'deck', 
   '@deck.gl/extensions': 'deck', 
   '@deck.gl/geo-layers': 'deck', 
   '@deck.gl/layers': 'deck', 
   '@deck.gl/mesh-layers': 'deck', 
   '@loaders.gl/core': 'loaders', 
   '@luma.gl/core': 'luma', 
   'mapbox-gl': 'mapboxgl' 
 };

    https://github.com/uber/deck.gl/blob/94bad4bb209a5da0686fb03f107e86b18199c108/website/webpack.config.js#L128-L141

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<script src="https://unpkg.com/h3-js"></script>
<script src="https://bundle.run/[email protected]"></script>
<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>

    https://github.com/uber/deck.gl/blob/94bad4bb209a5da0686fb03f107e86b18199c108/website/src/static/index-prod.html#L17-L19