Getting Uncaught ReferenceError: THREE is not defined after following yeoman generator tutorial

[shuang2411]

I am getting these error messages on the browser console after following the tutorial.

ConsoleChannel.js:14 MapView: Failed to connect to datasource anonymous-datasource#1: Error during worker initialization: Uncaught ReferenceError: THREE is not defined in http://localhost:8080/decoder.bundle.js:35849

Uncaught ReferenceError: THREE is not defined
    at Object.three (external "THREE":1)
    at __webpack_require__ (bootstrap:18)
    at Object../node_modules/@here/harp-datasource-protocol/lib/ColorUtils.js (ColorUtils.js:10)
    at __webpack_require__ (bootstrap:18)
    at Object../node_modules/@here/harp-datasource-protocol/index.js (index.js:31)
    at __webpack_require__ (bootstrap:18)
    at Object../node_modules/@here/harp-vectortile-datasource/lib/VectorTileDecoder.js (VectorTileDecoder.js:9)
    at __webpack_require__ (bootstrap:18)
    at Object../node_modules/@here/harp-vectortile-datasource/index-worker.js (index-worker.js:18)
    at __webpack_require__ (bootstrap:18)


Uncaught ReferenceError: THREE is not defined
    at Object.three (external "THREE":1)
    at __webpack_require__ (bootstrap:18)
    at Object../node_modules/@here/harp-datasource-protocol/lib/ColorUtils.js (ColorUtils.js:10)
    at __webpack_require__ (bootstrap:18)
    at Object../node_modules/@here/harp-datasource-protocol/index.js (index.js:31)
    at __webpack_require__ (bootstrap:18)
    at Object../node_modules/@here/harp-vectortile-datasource/lib/VectorTileDecoder.js (VectorTileDecoder.js:9)
    at __webpack_require__ (bootstrap:18)
    at Object../node_modules/@here/harp-vectortile-datasource/index-worker.js (index-worker.js:18)
    at __webpack_require__ (bootstrap:18)

I am using v15.0.1 of nodejs, 6.14.8 of npm, 3.1.1 of yeoman and using WSL2(Ubuntu 18.04 LTS).

[nzjony]

@shuang2411 , thanks for the bug report. I will try to reproduce.

[nzjony]

@shuang2411 , I can't reproduce locally on mac with v14.11.0 of nodejs, 6.14.8 of npm, 3.1.1 of yeoman, and Mac OS 10.15.7.

I know a colleague has node 15, I will ask if he can reproduce.

[nzjony]

@shuang2411 , I tried the following docker image: https://github.com/nzjony/docker-ubuntu-node Which has node:v15.0.1, npm:7.0.3, yo:3.1.1 and Ubuntu 18.04.5 LTS, but still couldn't reproduce.

What command are you running?

[nzjony]

@shuang2411 , please also check with npm -g list to see if you have some yeoman generator installed locally already?

[shuang2411]

I can only find one yo after running npm -g list.

I run this to generate the project
npx -p yo -p @here/generator-harp.gl yo @here/harp.gl and choose javascript

Then I run
npm start

I got these:

npm start

> MoneyBall@0.1.0 start /home/zzm/MoneyBall
> webpack serve

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from /home/zzm/MoneyBall
(node:684) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ ｢wdm｣: assets by path resources/fonts/Default_Assets/ 86.3 MiB 452 assets
assets by path resources/fonts/Default_BoldAssets/ 28.3 MiB 149 assets
assets by path resources/*.json 393 KiB 13 assets
assets by path resources/*.png 2.47 MiB
  assets by status 2.35 MiB [big] 6 assets
  4 assets
assets by path *.js 3.45 MiB
  asset mapview.bundle.js 2.84 MiB [emitted] [big] (name: mapview) 1 related asset
  asset three.min.js 628 KiB [emitted] [from: node_modules/three/build/three.min.js] [copied] [big]
assets by path resources/wests_textures/*.png 304 KiB
  asset resources/wests_textures/clover.png 152 KiB [emitted] [from: node_modules/@here/harp-map-theme/resources/wests_textures/clover.png] [copied]
  asset resources/wests_textures/paving.png 151 KiB [emitted] [from: node_modules/@here/harp-map-theme/resources/wests_textures/paving.png] [copied]
asset resources/fonts/Default_FontCatalog.json 164 KiB [emitted] [from: node_modules/@here/harp-map-theme/resources/fonts/Default_FontCatalog.json] [copied]
asset index.html 1.23 KiB [emitted]
asset resources/README.md 83 bytes [emitted] [from: resources/README.md] [copied]
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/@here/ 2.17 MiB 295 modules
modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
modules by path ./node_modules/html-entities/lib/*.js 57.9 KiB 4 modules
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB
  ./node_modules/querystring/index.js 127 bytes [built] [code generated]
  ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
  ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
modules by path ./*.js 1.73 KiB
  ./index.js 751 bytes [built] [code generated]
  ./View.js 1020 bytes [built] [code generated]
10 modules
webpack 5.4.0 compiled successfully in 2432 ms

asset decoder.bundle.js 1.33 MiB [emitted] [big] (name: decoder) 1 related asset
asset three.min.js 628 KiB [emitted] [from: node_modules/three/build/three.min.js] [copied] [big]
asset resources/README.md 83 bytes [emitted] [from: resources/README.md] [copied]
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/@here/ 679 KiB 142 modules
modules by path ./node_modules/protobufjs/ 51.2 KiB 11 modules
modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
modules by path ./node_modules/geojson-vt/src/*.js 26.9 KiB 8 modules
modules by path ./node_modules/@protobufjs/ 23.7 KiB 7 modules
modules by path ./node_modules/html-entities/lib/*.js 57.9 KiB 4 modules
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB
  ./node_modules/querystring/index.js 127 bytes [built] [code generated]
  ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
  ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
11 modules
webpack 5.4.0 compiled successfully in 1766 ms
ℹ ｢wdm｣: Compiled successfully.

Then I open chrome on http://localhost:8080, and got all the errors in console.

[nzjony]

Hmm, I wonder if it has to do with webpack 5.4? I need to finish now but I will look again tomorrow.

[shuang2411]

After trying the generation again I found these error:

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported

npm WARN @here/harp-webpack-utils@0.21.0 requires a peer of webpack@^5.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@4.5.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN copy-webpack-plugin@6.3.0 requires a peer of webpack@^4.37.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN webpack-dev-middleware@3.7.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

And this my package.json:

{
    "name": "test",
    "version": "0.1.0",
    "description": "Generated with generator-harp.gl 0.21.0",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "start": "webpack serve"
    },
    "author": "",
    "private": true,
    "dependencies": {
        "@here/harp-datasource-protocol": "^0.21.1",
        "@here/harp-geoutils": "^0.21.0",
        "@here/harp-map-controls": "^0.21.1",
        "@here/harp-map-theme": "^0.21.1",
        "@here/harp-mapview": "^0.21.1",
        "@here/harp-vectortile-datasource": "^0.21.1",
        "@here/harp-webpack-utils": "^0.21.0",
        "three": "^0.120.1"
    },
    "devDependencies": {
        "webpack": "^5.4.0",
        "webpack-cli": "^4.2.0",
        "webpack-dev-server": "^3.11.0"
    }
}

Some of these errors seems self-contradicting, after I do
npm install webpack@^5.3.0

I got these

npm WARN webpack-dev-middleware@3.7.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

There seems to be a conflict in dependency tree between the webpack@"^4.0.0" from webpack-dev-middleware@3.7.2 and webpack@5.4.0 from other dependency

I am not very familiar with nodejs, please let me know even if the problem is trivial. Thank you!

[nzjony]

@shuang2411 , thank you! I managed to reproduce, I will fix! Again, thanks so much!!

[nzjony]

@shuang2411 , I just need to make a patch release, then you can retry this & hopefully it works.

[nzjony]

@shuang2411 , the generator is upgraded to v0.21.2, can you please retest?

[shuang2411]

It worked thank you so much!