LWC (Mapbox) में तृतीय पक्ष पुस्तकालय लोड करने में असमर्थ

Dec 27 2020

मैं एक LWC घटक में मैपबॉक्स का उपयोग करने की कोशिश कर रहा था, लोड लाइब्रेरी का उपयोग करके अपनी लाइब्रेरी आयात करके, लेकिन मुझे केवल वादे में एक अपरिभाषित त्रुटि मिल रही है।

मैंने CSS और JS फ़ाइलों (mapbox.css और mapbox.js) के साथ एक ज़िप बंडल बनाया, और यह भी जाँचने के लिए एक परीक्षण JS फ़ाइल कि ज़िप के साथ कोई समस्या नहीं है (उदाहरण के लिए console.log। संदेश के साथ jj )।

मैंने इसे मेटाडेटा एपीआई का उपयोग करके अपलोड किया है, और इसे ए के रूप में सेट किया है application/zip, यहां एक्सएमएल फ़ाइल सामग्री है:

<?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फ़ाइल।

मैंने फाइलों को चेक किया है कि सेल्सफोर्स यूआरएल में उन्हें ब्राउज़र विंडो में खोलकर सब कुछ ठीक लग रहा है, लेकिन जैसा कि मुझे त्रुटि के बारे में कोई विवरण नहीं मिल रहा है, मुझे नहीं पता कि मैं क्या कर सकता हूं।

जेएस लाइब्रेरी की विफलता की सामग्री यहां पाई जा सकती है: मैपबॉक्स जीएल 2.0.1 ।

कोई भी सहायताकाफी प्रशंसनीय होगी!

जवाब

7 MohithShrivastava Dec 27 2020 at 09:17

सेल्सफोर्स लॉकर कंसोल का उपयोग करके नियमित मैपबॉक्स जीएल नियमित संस्करण के साथ डिबगिंग करने पर पता चला कि यह मुद्दा इसलिए है क्योंकि यह काम करने के लिए आवश्यक सीएसपी सेल्सफोर्स लॉकर सेवा द्वारा समर्थित नहीं है।

कार्यकर्ता-src बूँद-बच्चा src blob लॉकर में MIME प्रकार समर्थित नहीं हैं।

इसके बाद, मुझे पता चला कि मैपबॉक्स उन अनुभागों के लिए प्रलेखित एक वैकल्पिक दृष्टिकोण प्रदान करता है जिनकी सख्त सीएसपी नीति है। यह यहाँ प्रलेखित है ।

इस दृष्टिकोण का उपयोग करने पर मुझे पता चला कि यह त्रुटि है जो पॉप अप करता है

एरर (जेएस) टाइपर्रर: a .orker नए 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)

यह त्रुटि है क्योंकि लॉकर सेवा जावास्क्रिप्ट कार्यकर्ता के उपयोग को रोकती है

यहां कुछ सुझाव दिए गए हैं, जिन्हें मैं यहां छोड़ना चाहूंगा

  1. बिजली-मानचित्र घटक का उपयोग करके बॉक्स बेस घटक का उपयोग करें

यदि ऊपर नहीं मिलता है तो नीचे दिए गए विकल्पों का उपयोग करें

  1. एक Visualforce का उपयोग करें और LWC घटक के अंदर पृष्ठ को आइफ्रेम करें। इस दृष्टिकोण का उपयोग करते हुए कोई लॉकर प्रतिबंध नहीं होगा।
  2. यह देखने के लिए कि क्या उनके पास कोई सिफारिश है, मैपबॉक्स समर्थन पर पहुँचें। क्या जावास्क्रिप्ट कार्यकर्ता का उपयोग किए बिना एक वैकल्पिक एसडीके है? आप उन्हें इस पद की ओर इशारा कर सकते हैं।