Worker error with using Mapbox GL CSP JS in Salesforce LWC

Question

I am working with mapbox gl csp as per documentation from mapbox. It recommend using mapbox-gl-csp and mapbox-gl-csp-worker for using this library in environment with Strict CSP policy. In my case I am trying to put a map in salesforce LWC and I am receiving worker related error for the following code.

Here is my code: HTML File

<template>
    <div lwc:dom="manual" id="map" class="map"></div>
</template>

Javascript File

import { LightningElement } from 'lwc';
import mapboxgllibrary from '@salesforce/resourceUrl/maplib';//mapbox-gl.css static resource
import mapboxglcsp from '@salesforce/resourceUrl/mapboxglcsp';//mapbox-gl-csp.js static resource
import mapboxglcspworker from '@salesforce/resourceUrl/mapboxglcspworker';// mapbox-gl-csp-worker.js static resource
import { loadScript, loadStyle } from "lightning/platformResourceLoader";

export default class Mapbox extends LightningElement {
    async connectedCallback(){
        try{
            await loadStyle(this, mapboxgllibrary + "/mapbox-gl.css");
            await loadScript(this, mapboxglcsp);
            console.log('Loaded mapbox-gl-csp.js library');

            await loadScript(this, mapboxglcspworker);
            console.log('Loaded mapbox-gl-csp-worker.js');
            
            console.log('Mapbox GL JS version: '+mapboxgl.version);

            mapboxgl.workerUrl = '<relative-url>/resource/1683745092000/mapboxglcspworker?';
            mapboxgl.accessToken = '<access Token>';

            const map = new mapboxgl.Map({
                container: this.template.querySelector('.map'), // container ID
                style: 'mapbox://styles/mapbox/streets-v12' // style URL
            });
        }catch(e){
            console.log('Error while putting map: ');
            console.log(e);
        }
    }
}

And I am seeing this error in the console and no map rendering:

mapbox.js:1 Loaded mapbox-gl-csp.js library
mapbox.js:1 Loaded mapbox-gl-csp-worker.js
mapbox.js:1 Mapbox GL JS version: 2.14.1
mapbox.js:1 Error while putting map: 
mapbox.js:1 TypeError: e.Worker is not a constructor
    at new yp (mapboxglcsp:3:175158)
    at WorkerPool.acquire (mapboxglcsp:3:175383)
    at new Dispatcher (mapboxglcsp:3:81361)
    at new Style (mapboxglcsp:3:217124)
    at Map$1._updateStyle (mapboxglcsp:3:576648)
    at Map$1.setStyle (mapboxglcsp:3:576398)
    at new Map$1 (mapboxglcsp:3:567285)
    at x.connectedCallback (mapbox.js:1:1303)

I went to through one another somewhat related answer under this question here: MapBox GL CSP Version Not Rendering Tiles but it did not solve the error. I tried setting mapboxgl.workerClass by creating a blob from the mapbox-gl-csp-worker.js file as well but get same error with worker.

Any help is appreciated.

Worker error with using Mapbox GL CSP JS in Salesforce LWC

0 Answers0