I was trying to use Mapbox in an LWC component, by importing its library using loadScript, but I am only getting an undefined error in the promise.
I created a ZIP bundle with the CSS and JS files (mapbox.css and mapbox.js), and also a test JS file to check there is no problem with the ZIP itself (example.js with a console.log
message).
I have uploaded it using the Metadata API, and set it as an application/zip
, here is the XML file contents:
<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
<cacheControl>Private</cacheControl>
<contentType>application/zip</contentType>
</StaticResource>
This is the example code I am trying to run:
import { api, LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import MAPBOX from '@salesforce/resourceUrl/mapbox';
export default class InquiryMap extends LightningElement {
@api recordId;
mapboxInitialized = false;
renderedCallback() {
this.bootMapbox();
};
bootMapbox() {
if (this.mapboxInitialized) {
return;
}
this.mapboxInitialized = true;
loadStyle(this, MAPBOX + '/mapbox.css')
.then(() => {
console.log('Mapbox CSS is ready! =)');
})
.catch((err) => {
console.log('Error (CSS)', err);
});
loadScript(this, MAPBOX + '/example.js')
.then(() => {
console.log('Mapbox Example JS is ready! =)');
})
.catch((err) => {
console.log('Error (Example)', err);
});
loadScript(this, MAPBOX + '/mapbox.js')
.then(() => {
console.log('Mapbox JS is ready! =)');
})
.catch((err) => {
console.log('Error (JS)', err);
});
};
}
But this is the output in the console:
I am a example JS file
Mapbox Example JS is ready! =)
Mapbox CSS is ready! =)
Error (JS) undefined
The line with the content Mapbox Example JS is ready! =)
is from the example.js
file.
I have checked the files are OK by opening them in a browser window in the Salesforce URL, and everything looks fine, but as I am not getting any details about the error I do not know what can I do.
The contents of the failing JS library can be found here: Mapbox GL 2.0.1.
Any help would be much appreciated!