Não foi possível carregar a biblioteca de terceiros no LWC (Mapbox)

Dec 27 2020

Eu estava tentando usar o Mapbox em um componente LWC, importando sua biblioteca usando loadScript, mas estou recebendo apenas um erro indefinido na promessa.

Criei um pacote ZIP com os arquivos CSS e JS (mapbox.css e mapbox.js), e também um arquivo JS de teste para verificar se não há problema com o próprio ZIP (example.js com uma console.logmensagem).

Fiz upload usando a API de metadados e defini-o como application/zip, aqui está o conteúdo do arquivo 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 é o código de exemplo que estou tentando executar:

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

Mas esta é a saída do console:

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

A linha com o conteúdo Mapbox Example JS is ready! =)é do example.jsarquivo.

Verifiquei se os arquivos estão OK abrindo-os em uma janela do navegador no URL do Salesforce e tudo parece bem, mas como não estou obtendo nenhum detalhe sobre o erro, não sei o que posso fazer.

O conteúdo da biblioteca JS com falha pode ser encontrado aqui: Mapbox GL 2.0.1 .

Qualquer ajuda seria muito apreciada!

Respostas

7 MohithShrivastava Dec 27 2020 at 09:17

Após a depuração com a versão regular do Regular Mapbox GL usando o Salesforce Locker Console, descobrimos que o problema é porque o CSP necessário para fazer isso funcionar não é compatível com o serviço Salesforce Locker.

worker-src blob child-src blob não são tipos MIME compatíveis no armário.

Em seguida, descobri que o Mapbox fornece uma abordagem alternativa documentada nesta seção para sites que têm uma política Strict CSP. Isso está documentado aqui .