__webpack_require__ is not defined. Here map bundle doesn't work

Question

I've got an issue inside web worker when tried to use @here/maps-api-for-javascript.

I think that happens since the webpack changes the code that runs inside the web worker.

the initial part of the bundle (mapsjs.bundle.js):

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

after webpack build:

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

In this case inside the web worker, we don't have the __webpack_require__ variable. Looks like I have to configure the webpack to prevent it.

The example from the official site doesn't work too. Same error. https://developer.here.com/documentation/maps/3.1.22.0/dev_guide/topics/get-started-bundling.html

But all works fine if we add the here-maps API as an inline script in HTML.

Answer 1

The problem comes from the fact that Webpack 5 now by default renames the "global" variable. The guide was written when the webpack 4 was the main version. The following option in the webpack.config will do the trick.

node: { global: false }

This webpack.config works for me:

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

I just changed react-scripts version from 5.0.0 to 4.0.3 on packge.json file then rm -rf node_modules and npm i to reinstall

It "fixed" the issue, at least for now.