__webpack_require__ 未定义。这里地图包不起作用

Question

当我尝试使用

@here/maps-api-for-javascript

时，网络工作者内部遇到了问题。

我认为发生这种情况是因为 webpack 更改了 Web Worker 内部运行的代码。

捆绑包的初始部分（mapsjs.bundle.js）：

e = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};

webpack 构建后：

e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof __webpack_require__.g?__webpack_require__.g:"undefined"

在本例中，在 Web Worker 内部，我们没有

__webpack_require__

变量。看来我必须配置 webpack 来阻止它。

官方网站上的示例也不起作用。同样的错误。 https://developer.here.com/documentation/maps/3.1.22.0/dev_guide/topics/get-started-bundling.html

但是如果我们将here-maps API 添加为HTML 中的内联脚本，一切都会正常工作。

Answer 1

问题来自于 Webpack 5 现在默认重命名“全局”变量。该指南是在 webpack 4 作为主要版本时编写的。 webpack.config 中的以下选项即可解决问题。

node: { global: false }

这个 webpack.config 对我有用：

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

 module.exports = {
     mode: 'production',
     entry: {
         index: './index.js'
     },
     output: {
         publicPath: './out/',
         path: path.resolve(__dirname, 'out'),
         filename: '[name].js',
         chunkFilename: '[name].bundle.js'
     },
     optimization: {
         minimizer: [new TerserPlugin({
         /*chunkFilter: (chunk) => {
             // Exclude mapsjs chunk from the minification as it is already minified
             if (/mapsjs/.test(chunk.name)) return false;
             return true;
         }*/
         exclude: "mapsjs.bundle.js"
         })],
     },
     node: {
         global: false
     }
 };

Answer 2

我刚刚将 packge.json 文件上的反应脚本版本从 5.0.0 更改为 4.0.3 然后 rm -rf node_modules 和 npm i 重新安装

它“解决”了这个问题，至少现在是这样。

Answer 3

我解决了应用程序的问题，但仍然存在如何使用

@storybook/builder-webpack5

为 Storybook 设置此地图的问题。

Answer 4

我终于解决了节点全局的 Storybook 问题。问题在于使用

@storybook/addon-interactions

，因为

jest-mock

依赖于节点全局变量。要修复此故事书，应具有

.storybook/preview-head.html

文件并在此文件中包含以下代码：

<script>
  window.global = window;
</script>

Answer 5

我在使用

react-map-gl

包时遇到了非常类似的错误：

var e = "undefined" != typeof window ? window : "undefined" != typeof __webpack_require__.g ? __webpack_require__.g : "undefined" != typeof self ? self : {};

就我而言，我需要升级

mapbox-gl

包。