LWC'de (Mapbox) 3. taraf kitaplığı yüklenemiyor

Dec 27 2020

Mapbox'ı bir LWC bileşeninde, kütüphanesini loadScript kullanarak içe aktararak kullanmaya çalışıyordum, ancak sözde yalnızca tanımsız bir hata alıyorum.

CSS ve JS dosyalarıyla (mapbox.css ve mapbox.js) bir ZIP paketi oluşturdum ve ayrıca ZIP'in kendisiyle ilgili bir sorun olmadığını kontrol etmek için bir test JS dosyası ( console.logmesajla birlikte example.js ).

Meta Veri API'sını kullanarak yükledim ve bir application/zipXML dosyası içeriği olarak ayarladım :

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

Çalıştırmaya çalıştığım örnek kod bu:

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

Ancak konsoldaki çıktı şu:

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

İçeriğin Mapbox Example JS is ready! =)olduğu satır example.jsdosyadandır.

Dosyaları Salesforce URL'sinde bir tarayıcı penceresinde açarak tamam olup olmadığını kontrol ettim ve her şey yolunda görünüyor, ancak hatayla ilgili herhangi bir ayrıntı alamadığım için ne yapabilirim bilmiyorum.

Başarısız JS kitaplığının içeriği burada bulunabilir: Mapbox GL 2.0.1 .

Herhangi bir yardım çok takdir edilecektir!

Yanıtlar

7 MohithShrivastava Dec 27 2020 at 09:17

Salesforce Dolap Konsolunu kullanan Normal Mapbox GL normal sürümü ile hata ayıklama üzerine , sorunun bu çalışmayı elde etmek için gereken CSP'nin Salesforce Locker hizmeti tarafından desteklenmemesinden kaynaklandığını keşfetti.

worker-src blob child-src blob , dolapta MIME türlerini desteklemez.

Daha sonra, Mapbox'ın Katı CSP politikasına sahip siteler için bu bölümde belgelenen alternatif bir yaklaşım sunduğunu keşfettim. Bu burada belgelenmiştir .