LWC（Mapbox）にサードパーティライブラリを読み込めません

Dec 27 2020

loadScriptを使用してライブラリをインポートすることにより、LWCコンポーネントでMapboxを使用しようとしましたが、promiseで未定義のエラーが発生するだけです。

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 GL2.0.1。

どんな助けでも大歓迎です！

回答

7 MohithShrivastava Dec 27 2020 at 09:17

定期的にデバッグ時にMapbox GL定期Salesforceの使用バージョンロッカーコンソールをCSPは、Salesforceのロッカーサービスでサポートされていません。この作業を取得するために必要なので、問題があることを発見しました。

worker-src blob child-src blobは、ロッカーでサポートされているMIMEタイプではありません。

次に、Mapboxが、厳格なCSPポリシーを持つサイトに対して、このセクションで説明されている代替アプローチを提供することを発見しました。これはここに記載されています。