3

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.

Saeed Zhiany
  • 2,051
  • 9
  • 30
  • 41
Yauhen
  • 31
  • 1
  • 3

4 Answers4

3

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
     }
 };
  • 1
    I'm running into this problem with create-react-app, where the webpack configuration is hidden away, any guidance about what to do here (no pun intended)? – Pete Jan 12 '22 at 08:40
  • Also have a similar problem. What can I do with create-react-app 5.0 that uses Webpack 5 by default, where no configuration file is located. Is it possible to use CRA 5.0 and avoid the eject process to add the config file like that? – nvipash May 06 '22 at 22:05
  • If I do this then I have the following issue: `async_iterator.js?undefined:48 Uncaught (in promise) ReferenceError: global is not defined at ./node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_readable.js (async_iterator.js?undefined:48:1)` – Nacho H Sep 06 '22 at 18:05
0

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.

Rômulo Tone
  • 115
  • 6
0

I fixed the problem with application but still have problem how to setup this maps for Storybook with @storybook/builder-webpack5.

Luki
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 10 '22 at 11:46
0

I finally fixed Storybook issue with node global. Problem is with using @storybook/addon-interactions because jest-mock relying on the node global variable. To fix this storybook should have .storybook/preview-head.html file and contain in this file following code:

<script>
  window.global = window;
</script>
Luki
  • 1