typescript - ارور ReferenceError از نوع Uncaught: __WEBPACK_EXTERNAL_MODULE_XX__ تعریف نشده است

ما یک بسته npm سفارشی به نام our-map داریم که با استفاده از TypeScript، webpack و ArcGIS JS API ساختهایم تا یک نقشه esri را در یک کامپوننت React بستهبندی کنیم. ما تأیید کردهایم که ماژول همانطور که انتظار میرود از یک صفحه آزمایشی داخل ماژول کار میکند. یعنی، میتوانیم کامپوننت نقشه React خود را نمایش دهیم و نقشههای وب را به درستی فراخوانی کنیم. بسته npm our-map به یک اشتراک فایل نوشته شده است تا بتوانیم آن را در برنامههای دیگر خود با استفاده از npm نصب کنیم.

ما npm install کردهایم our-map را به our-app، یک برنامه دیگر TypeScript. ما از webpack برای بستهبندی برنامه استفاده میکنیم. با این حال، در زمان اجرا خطای زیر را دریافت میکنیم.

Uncaught ReferenceError: __WEBPACK_EXTERNAL_MODULE_61__ is not defined

هنگام اشکالزدایی این در کروم، ما ماژول مقصر را پیدا میکنیم

module.exports = __WEBPACK_EXTERNAL_MODULE_61__;

//////////////////
// WEBPACK FOOTER
// external "esri/arcgis/utils"
// module id = 61
// module chunks = 0

اگر ما ماژول esri/arcgis/utils را از ماژول our-map حذف کنیم و دوباره منتشر کنیم، خطای مشابهی خواهیم داشت، اما با ارجاع به ماژول بعدی esri.

کد برای our-app به شرح زیر است:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Our Application</title>
  </head>

  <body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
            require(["dist/main.bundle.js"], function (main) {});
        </script>
  </body>
</html>

app.tsx برای وضوح سادهسازی شده

import * as React from "react";
import {MapContainer} from "our-map";

export const App = (props: IApp) => {
    return <div style={{height: "100%"}}>
        <div style={mapStyle}>
            <MapContainer />
        </div>
    </div>;
};

webpack.config.js

var webpack = require("webpack");

module.exports = {
    entry: {
        main: ['./src/app/main.ts', 'esri', 'esri/map', 'esri/urlUtils', 'esri/geometry/Point', 'esri/arcgis/utils']
    },
    output: {
        filename: 'dist/[name].bundle.js'
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            //typescript
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            },
            // css
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            // images
            {
                test: /\.png$/,
                loader: "url-loader",
                query: { mimetype: "image/png" }
            },
            // fonts
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&name=dist/fa/[hash].[ext]&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader?name=dist/fa/[hash].[ext]"
            }
        ]
    },
    externals: [
        function(context, request, callback) {
            if (/^dojo/.test(request) ||
                /^dijit/.test(request) ||
                /^esri/.test(request)
            ) {
                return callback(null, "amd " + request);
            }
            callback();
        }
    ],
    devtool: 'source-map'
};

نظری دارید که چه چیزی میتواند باعث این مشکل شود و چگونه میتوان آن را حل کرد؟

پاسخ شماره ۱

راه حل این بود که libraryTarget: 'amd' را در فایل webpack.config.js به این صورت تنظیم کنید:

output: {
    filename: 'dist/[name].bundle.js',
    libraryTarget: 'amd'
},