Bibliothek eines Drittanbieters in LWC (Mapbox) kann nicht geladen werden

Dec 27 2020

Ich habe versucht, Mapbox in einer LWC-Komponente zu verwenden, indem ich ihre Bibliothek mit loadScript importiert habe, aber ich erhalte nur einen undefinierten Fehler im Versprechen.

Ich habe ein ZIP-Bundle mit den CSS- und JS-Dateien (mapbox.css und mapbox.js) sowie eine Test-JS-Datei erstellt, um zu überprüfen, ob kein Problem mit der ZIP-Datei selbst vorliegt (example.js mit einer console.logNachricht).

Ich habe es mithilfe der Metadaten-API hochgeladen und als festgelegt application/zip. Hier ist der Inhalt der XML-Datei:

<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Private</cacheControl>
    <contentType>application/zip</contentType>
</StaticResource>

Dies ist der Beispielcode, den ich ausführen möchte:

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);
        });
    };
}

Dies ist jedoch die Ausgabe in der Konsole:

I am a example JS file
Mapbox Example JS is ready! =)
Mapbox CSS is ready! =)
Error (JS) undefined

Die Zeile mit dem Inhalt Mapbox Example JS is ready! =)stammt aus der example.jsDatei.

Ich habe überprüft, ob die Dateien in Ordnung sind, indem ich sie in einem Browserfenster in der Salesforce-URL geöffnet habe. Alles sieht gut aus. Da ich jedoch keine Details zu dem Fehler erhalte, weiß ich nicht, was ich tun kann.

Den Inhalt der fehlerhaften JS-Bibliothek finden Sie hier: Mapbox GL 2.0.1 .

Jede Hilfe wäre sehr dankbar!

Antworten

7 MohithShrivastava Dec 27 2020 at 09:17

Beim Debuggen mit der regulären Version von Regular Mapbox GL mithilfe der Salesforce Locker Console wurde festgestellt, dass das Problem darin besteht, dass der CSP, der erforderlich ist, damit dies funktioniert, vom Salesforce Locker-Dienst nicht unterstützt wird.

worker-src-Blob child-src-Blob werden von MIME-Typen im Schließfach nicht unterstützt.

Als Nächstes stellte ich fest, dass Mapbox einen alternativen Ansatz bietet, der in diesem Abschnitt für Websites mit einer strengen CSP-Richtlinie dokumentiert ist. Dies ist hier dokumentiert .