Maplibre-gl no longer supports UMD

[andysellick]

We use the DEFRA map in frontends map component. In order to have it function correctly within our CSP we rely upon maplibre-gls CSP worker, which is used in place of the default.

Unfortunately, as of v6 of maplibre-gl the UMD approach has been removed, and can only be used with ES6 modules. Our Rails setup does not yet support this, so we've had to pin to an older version of maplibre-gl.

Context

Recording in case this is helpful.

We currently use the UMD approach for the DEFRA map. This works as follows:

• we import the csp worker from the node_modules via a JS file specifically created for this
• since we don't know what the fingerprinted filename for this file will be, we render the fingerprinted filename in the map component file and attach it to a data attribute
• we then read the attribute in the component JS and pass it to the initialiser for the DEFRA map

ES modules

The alternative to UMD is ES modules. We currently can't use ES modules on GOV.UK because of our asset pipeline, which compiles and fingerprints our JS files. Typical ES modules syntax such as the following will fail because the JS doesn't know the fingerprinted name of the file it is trying to import.

import { name as squareName, draw } from "./shapes/square.js"; // fails
// square.js is output from the asset pipeline as square-[unknown fingerprint].js