Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react import failure apparently from undefined Blob class. #198

Open
NH-RedAnt opened this issue Apr 5, 2024 · 2 comments
Open

react import failure apparently from undefined Blob class. #198

NH-RedAnt opened this issue Apr 5, 2024 · 2 comments

Comments

@NH-RedAnt
Copy link

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/[email protected]/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/[email protected]/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
Copy link
Author

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
Copy link
Contributor

msbarry commented Apr 6, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants