typescript - Ανεξέλεγκτο ReferenceError: __WEBPACK_EXTERNAL_MODULE_XX__ δεν έχει οριστεί

Έχουμε ένα προσαρμοσμένο npm πακέτο, our-map, που δημιουργήσαμε χρησιμοποιώντας TypeScript, webpack και το ArcGIS JS API για να ενσωματώσουμε έναν χάρτη esri σε ένα React component. Έχουμε επιβεβαιώσει ότι το module λειτουργεί όπως αναμένεται από μια σελίδα δοκιμής μέσα στο module. Δηλαδή, μπορούμε να εμφανίσουμε το React Map Component μας και να λάβουμε web maps σωστά. Το npm πακέτο our-map έχει γραφτεί σε ένα κοινόχρηστο αρχείο ώστε να μπορούμε να το εγκαταστήσουμε με npm στις άλλες εφαρμογές μας.

Έχουμε κάνει npm install το our-map στην our-app, μια άλλη εφαρμογή TypeScript. Χρησιμοποιούμε webpack για να δεσμεύσουμε την εφαρμογή. Ωστόσο, κατά την εκτέλεση λαμβάνουμε το ακόλουθο σφάλμα.

Uncaught ReferenceError: __WEBPACK_EXTERNAL_MODULE_61__ is not defined

Κατά τον εντοπισμό σφαλμάτων σε αυτό στο Chrome, διαπιστώνουμε ότι το προβληματικό μοντέλο είναι

module.exports = __WEBPACK_EXTERNAL_MODULE_61__;

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

Αν αφαιρέσουμε το esri/arcgis/utils module από το our-map module και το ξαναδημοσιεύσουμε, έχουμε ένα παρόμοιο σφάλμα, αλλά αναφερόμενοι στο επόμενο module της 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'
};

Οποιαδήποτε σκέψη για το τι θα μπορούσε να προκαλεί αυτό το πρόβλημα και πώς να το λύσουμε;

Απάντηση #1

Η λύση ήταν να οριστεί libraryTarget: 'amd' στο αρχείο webpack.config.js ως εξής:

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