search

onthegomap / maplibre-contour

Render contour lines from raster DEM tiles in maplibre-gl-js
https://onthegomap.github.io/maplibre-contour/
Other
143 stars 11 forks source link

react import failure apparently from undefined Blob class. #198

Open NH-RedAnt opened 2 months ago

NH-RedAnt commented 2 months ago

First thanks for the great code!

I'm migrating my Proof-of-Concept MapLibre from a static python Flask instance into a fairly complex React environment (a Plone/Volto block). In the static environment I used a script import of: 'https://unpkg.com/maplibre-contour@0.0.5/dist/index.min.js'

The rest of my MapLibre migration is working, but I have not yet been able to find a way to reliably import your package.

One solution that "nearly works" is using react-script-tag to import the library from unpkg.com like so:

import ScriptTag from 'react-script-tag';
...
return ...
    <ScriptTag
        type="text/javascript"
        src="https://unpkg.com/maplibre-contour@0.0.5/dist/index.min.js" />

This setup works fine after a refresh, but does not appear to have loaded the library by the time it's first called. And I have not found a way to await the library load.

I had hoped a local version yarn add maplibre-contour would provide a better solution. But when used as suggested in your readme the library fails to load with the following error:

/home/rea/src/rah-site/node_modules/maplibre-contour/dist/index.cjs:23
    mlcontour = chunk(sharedChunk);
                ^
ReferenceError: Blob is not defined
    at /home/rea/src/rah-site/node_modules/maplibre-contour/dist/index.cjs:2171:1
    at define (/home/rea/src/rah-site/node_modules/maplibre-contour/dist/index.cjs:23:17)
    at Object.<anonymous> (/home/rea/src/rah-site/node_modules/maplibre-contour/dist/index.cjs:2131:1)
    at Module._compile (node:internal/modules/cjs/loader:1196:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1250:10)
    at Module.load (node:internal/modules/cjs/loader:1074:32)
    at Function.Module._load (node:internal/modules/cjs/loader:909:12)
    at Module.require (node:internal/modules/cjs/loader:1098:19)
    at require (node:internal/modules/cjs/helpers:108:18)
    at Object.maplibre-contour (/home/rea/src/rah-site/rah-site/external commonjs "maplibre-contour":1:1) sswp> !!! Script exited with code 1

I have attempted a number of other imports from within the maplibre-contour/dist/ area. But the best I was able to do is promise that gets imported a as module that appears to have no usable content. I have tried versions 0.0.5, 0.0.6, 0.0.7.

I have pulled back this repo and I can npm run build it. After that I'm in over my head in attempting to locate the issue, or even which import variation offers my best chance of success.

I can see you had a prior bug like this. So I'm hoping you have some insight, even with the little I've provided here.

Thanks!

NH-RedAnt commented 2 months ago

Perhaps this will help debug. I found a combination that, so far, always works.

Using the npm 0.0.7 package, inside an "async function" like this:

export async function addTopo(map) {
  const contourjs = import('maplibre-contour');
  contourjs.then( mlcontour => {
    const demSource = new mlcontour.default.DemSource({
    ...
msbarry commented 2 months ago

That's weird, Blob is almost universally supported by browsers. My guess is that plone/volta/ScriptTag setup you have is trying to load maplibre contour from a server-side rendering context? The async function makes sense if if can avoid the server trying to do it and only do it in the client?