LWC (Mapbox)에서 타사 라이브러리를로드 할 수 없습니다.

Dec 27 2020

loadScript를 사용하여 라이브러리를 가져 와서 LWC 구성 요소에서 Mapbox를 사용하려고했지만 약속에 정의되지 않은 오류 만 표시됩니다.

CSS 및 JS 파일 (mapbox.css 및 mapbox.js)이 포함 된 ZIP 번들과 ZIP 자체에 문제가 없는지 확인하기위한 테스트 JS 파일 ( console.log메시지 가있는 example.js )도 생성했습니다.

메타 데이터 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파일 에서 가져온 것 입니다.

Salesforce URL의 브라우저 창에서 파일을 열어 파일이 정상인지 확인했고 모든 것이 정상으로 보이지만 오류에 대한 세부 정보를 얻지 못하기 때문에 어떻게해야할지 모르겠습니다.

실패한 JS 라이브러리의 내용은 여기에서 찾을 수 있습니다 : Mapbox GL 2.0.1 .

어떤 도움이라도 대단히 감사하겠습니다!

답변

7 MohithShrivastava Dec 27 2020 at 09:17

Salesforce Locker Console을 사용하여 Regular Mapbox GL 일반 버전으로 디버깅 할 때 문제가이 작업에 필요한 CSP가 Salesforce Locker 서비스에서 지원되지 않기 때문임을 발견했습니다.

worker-src blob child-src blob 은 로커에서 지원되는 MIME 유형이 아닙니다.

다음으로 Mapbox가 Strict CSP 정책이있는 사이트에 대해이 섹션에 설명 된 대체 접근 방식을 제공한다는 것을 발견했습니다. 여기에 설명되어 있습니다 .