Tidak dapat memuat pustaka pihak ketiga di LWC (Mapbox)

Dec 27 2020

Saya mencoba menggunakan Mapbox dalam komponen LWC, dengan mengimpor perpustakaannya menggunakan loadScript, tetapi saya hanya mendapatkan kesalahan yang tidak ditentukan dalam janji.

Saya membuat bundel ZIP dengan file CSS dan JS (mapbox.css dan mapbox.js), dan juga file uji JS untuk memeriksa tidak ada masalah dengan ZIP itu sendiri (example.js dengan console.logpesan).

Saya telah mengunggahnya menggunakan Metadata API, dan menetapkannya sebagai application/zip, berikut adalah konten file 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>

Ini adalah contoh kode yang saya coba jalankan:

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

Tetapi ini adalah output di konsol:

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

Garis dengan konten Mapbox Example JS is ready! =)berasal dari example.jsfile.

Saya telah memeriksa apakah file tersebut OK dengan membukanya di jendela browser di URL Salesforce, dan semuanya terlihat baik-baik saja, tetapi karena saya tidak mendapatkan detail apa pun tentang kesalahan tersebut, saya tidak tahu apa yang dapat saya lakukan.

Konten pustaka JS yang gagal dapat ditemukan di sini: Mapbox GL 2.0.1 .

Bantuan apa pun akan sangat dihargai!

Jawaban

7 MohithShrivastava Dec 27 2020 at 09:17

Setelah men-debug dengan versi reguler GL Mapbox Reguler menggunakan Salesforce Locker Console menemukan bahwa masalahnya adalah karena CSP yang diperlukan agar ini berfungsi tidak didukung oleh layanan Salesforce Locker.

worker-src blob child-src blob tidak didukung tipe MIME di loker.

Berikutnya, saya menemukan bahwa Mapbox menyediakan pendekatan alternatif yang didokumentasikan di bagian ini untuk situs yang memiliki kebijakan CSP Ketat. Ini didokumentasikan di sini .