MapLibre and React

[astridx]

I have applied the examples of the repository https://github.com/mapbox/mapbox-react-examples to maplibre:
https://github.com/astridx/maplibre-react-examples

Locally, everything works well.

In the end I ran npm run build and copied the files in the build directory to astridx.github.io. The basic example is here: https://astridx.github.io/maplibre-react-examples/basic/

The demotiles are not displayed on astridx.github.io. And there are Errors in Console. But I am not sure where the error is exactly.

Maybe someone with more experience can give me a tip.

[HarelM]

@webberig Any chance you can take a look at it?
From what I saw the code looks fine to me, maybe there's something off with the build process and it generates a bad js file...?

[webberig]

@astridx @HarelM On first glance, it appears an error is being thrown in a background worker. I'll checkout the source code tonight and give it a closer look.

[astridx]

@webberig Thank you

[webberig]

OK, it's a complicated problem 😅 ...
I ran react-scripts eject which dumped all configuration into the project and I was able to fiddle with the Webpack config.

The build process uses Babel to transpile all code (including dependencies) to ES5. maplibre-gl is using classes (which is ES6) and these are being replaced with a babel util "_createClass". For some reason this _createClass has become "undefined" and throws the exception.

@HarelM Maplibre-gl has this weird script: https://github.com/maplibre/maplibre-gl-js/blob/main/rollup/bundle_prelude.js. do you know what this script does exactly ? It looks like it converts a chunk of Javascript into a Blob string and define that as a background worker. My guess this is the part that babel can't handle properly.

@astridx for now, the only solution I can offer is you need to take control over the build process (ie. eject) and exclude mapbox-gl in the babel-loader configuration.

I can't honestly identify the best solution. By definition babel should not break code while transpiling ES6 to ES5 so you can consider this to be a bug there, but maybe we can change our architecture so it doesn't make babel trip ?

[HarelM]

Yes, the prelude is used to inject the code of the worker into the library so that developers works not need to do it themselves. It is part of the build after the compilation of the workers, and the main code, and before the umd bundling of everything into a single file.
This has not changed between version 1.x and 2.x but package.json changed and now have type: module, which might cause issues. See #370 for example.

[astridx]

@HarelM @webberig Thank you very much. Surely that is "related" to this problem then: #610 (comment) ?

I can't honestly identify the best solution. By definition babel should not break code while transpiling ES6 to ES5 so you can consider this to be a bug there, but maybe we can change our architecture so it doesn't make babel trip ?

If I run into the trouble with such a simple example, surely others will too, right?

[HarelM]

Yes, I'm afraid you won't be the only one sufferings from this, we should definitely try and find a solution.

[wipfli]

#1011

[wipfli]

This should solve your problem @astridx :

{
  "name": "basic",
  "version": "0.1.0",
  "homepage": "https://astridx.github.io/maplibre-react-examples/basic",
  "dependencies": {
    "maplibre-gl": "2.0.0-pre.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "browserslist": {
    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "defaults",
+      "not ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[astridx]

Thanks @wipfli. I have just tried this. That seems to be the solution indeed.