Impossible de charger la bibliothèque tierce dans LWC (Mapbox)

Dec 27 2020

J'essayais d'utiliser Mapbox dans un composant LWC, en important sa bibliothèque à l'aide de loadScript, mais je n'obtiens qu'une erreur indéfinie dans la promesse.

J'ai créé un bundle ZIP avec les fichiers CSS et JS (mapbox.css et mapbox.js), ainsi qu'un fichier JS de test pour vérifier qu'il n'y a pas de problème avec le ZIP lui-même (example.js avec un console.logmessage).

Je l'ai téléchargé à l'aide de l'API de métadonnées et l'ai défini comme un application/zip, voici le contenu du fichier XML:

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

Voici l'exemple de code que j'essaie d'exécuter:

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

Mais voici la sortie de la console:

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

La ligne avec le contenu Mapbox Example JS is ready! =)provient du example.jsfichier.

J'ai vérifié que les fichiers sont corrects en les ouvrant dans une fenêtre de navigateur dans l'URL de Salesforce, et tout semble bien, mais comme je n'obtiens aucun détail sur l'erreur, je ne sais pas ce que je peux faire.

Le contenu de la bibliothèque JS défaillante peut être trouvé ici: Mapbox GL 2.0.1 .

Toute aide serait très appréciée!

Réponses

7 MohithShrivastava Dec 27 2020 at 09:17

Lors du débogage avec la version régulière de Mapbox GL standard à l'aide de la console Salesforce Locker, le problème est dû au fait que le CSP requis pour que cela fonctionne n'est pas pris en charge par le service Salesforce Locker.

Les objets blob worker-src blob child-src ne sont pas pris en charge dans le casier.

Ensuite, j'ai découvert que Mapbox fournit une approche alternative documentée dans cette section pour les sites qui ont une stratégie CSP stricte. Ceci est documenté ici .