Question

我们有一个自定义的npm包our-map，我们使用TypeScript，webpack和ArcGIS JS API将esri映射包装在React组件中。我们已确认该模块可从模块内的测试页面按预期工作。也就是说，我们可以显示我们的React Map Component并正确获取Web地图。 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模块中删除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'
};

有关可能导致此问题的原因及如何解决问题的任何想法？

Answer 1

解决方案是在webpack.config.js文件中设置1，如下所示：

libraryTarget: 'amd'

未捕获的ReferenceError：未定义__WEBPACK_EXTERNAL_MODULE_XX__

1 个答案: