No se puede cargar la biblioteca de terceros en LWC (Mapbox)

Dec 27 2020

Estaba tratando de usar Mapbox en un componente LWC, importando su biblioteca usando loadScript, pero solo obtengo un error indefinido en la promesa.

Creé un paquete ZIP con los archivos CSS y JS (mapbox.css y mapbox.js), y también un archivo JS de prueba para verificar que no haya ningún problema con el ZIP en sí (ejemplo.js con un console.logmensaje).

Lo cargué usando la API de metadatos y lo configuré como application/zip, aquí está el contenido del archivo 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>

Este es el código de ejemplo que estoy intentando ejecutar:

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

Pero esta es la salida en la consola:

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

La línea con el contenido Mapbox Example JS is ready! =)es del example.jsarchivo.

He comprobado que los archivos están bien abriéndolos en una ventana del navegador en la URL de Salesforce, y todo se ve bien, pero como no obtengo ningún detalle sobre el error, no sé qué puedo hacer.

El contenido de la biblioteca JS defectuosa se puede encontrar aquí: Mapbox GL 2.0.1 .

¡Cualquier ayuda será muy apreciada!

Respuestas

7 MohithShrivastava Dec 27 2020 at 09:17

Al depurar con la versión regular de Mapbox GL regular utilizando la Consola de Salesforce Locker, descubrió que el problema se debe a que el servicio de Salesforce Locker no admite el CSP necesario para que esto funcione.

worker-src blob child-src blob no son tipos MIME admitidos en el casillero.

A continuación, descubrí que Mapbox proporciona un enfoque alternativo documentado en esta sección para sitios que tienen una política estricta de CSP. Esto está documentado aquí .