Невозможно загрузить стороннюю библиотеку в LWC (Mapbox)

Dec 27 2020

Я пытался использовать Mapbox в компоненте LWC, импортировав его библиотеку с помощью loadScript, но я получаю только неопределенную ошибку в обещании.

Я создал пакет ZIP с файлами CSS и JS (mapbox.css и mapbox.js), а также тестовый файл JS, чтобы проверить, нет ли проблем с самим ZIP (example.js с console.logсообщением).

Я загрузил его с помощью API метаданных и установил его как application/zip, вот содержимое 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>

Это пример кода, который я пытаюсь запустить:

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

Но это вывод в консоли:

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

Строка с содержанием Mapbox Example JS is ready! =)взята из example.jsфайла.

Я проверил, что файлы в порядке, открыв их в окне браузера по URL-адресу Salesforce, и все выглядит нормально, но, поскольку я не получаю никаких подробностей об ошибке, я не знаю, что мне делать.

Содержимое отказавшей библиотеки JS можно найти здесь: Mapbox GL 2.0.1 .

Любая помощь приветствуется!

Ответы

7 MohithShrivastava Dec 27 2020 at 09:17

При отладке обычной версии Mapbox GL с помощью консоли Salesforce Locker обнаружил, что проблема заключается в том, что CSP, необходимый для этой работы, не поддерживается службой Salesforce Locker.

blob worker-src child-src blob не поддерживает типы MIME в шкафчике.

Затем я обнаружил, что Mapbox предоставляет альтернативный подход, описанный в этом разделе, для сайтов со строгой политикой CSP. Это задокументировано здесь .

При использовании этого подхода я обнаружил, что появляется эта ошибка.

Ошибка (JS) TypeError: a.Worker не является конструктором в новом gp (mapbox: 1) в xp.acquire (mapbox: 1) в новом Eh (mapbox: 1) в новом Id (mapbox: 1) в Map._updateStyle (mapbox: 1) в Map.setStyle (mapbox: 1) в новой карте (mapbox: 1) в eval (mapbox.js: 67)

Эта ошибка возникает из-за того, что Locker Service предотвращает использование JavaScript Worker