Latest main (Typescript) has some regressions in Firefox

[chippieTV]

maplibre-gl-js version:
current main tagged as v2.0.0-pre.1

browser:
Firefox 91.0 MacOS 10.15.7 Catalina
node 14.17.5
npm 6.14.14

Steps to Trigger Behavior

If you run npm run start-tests and connect Firefox, 3 tests fail. They all pass in Chrome. I checked out 1.15.2 and ran them, and Firefox passes. CI does not complain about this.

failed query-tests/regressions/mapbox-gl-js#5172
failed query-tests/regressions/mapbox-gl-js#6075
failed query-tests/regressions/mapbox-gl-js#6555

NOTE: linked issues are to the original mapbox issues

[astridx]

I just wanted to test https://github.com/maplibre/maplibre-gl-compare with typescript and also encountered error messages in the console in Firefox. In Chrome everything is fine.

You can check it fine version here https://astridx.github.io/maplibreexamples/plugins/maplibre-gl-compare-swipe-between-maps.html with the header:

    <script src="../config.js"></script>
    <script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css"
      rel="stylesheet"
    />

Everything is fine:

You can check it here https://astridx.github.io/maplibreexamples/plugins/maplibre-gl-compare-swipe-between-maps_.html with the header:

    <script src="../config.js"></script>
    <script src="https://unpkg.com/maplibre-gl@2.0.0-pre.1/dist/maplibre-gl.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl@2.0.0-pre.1/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    />

It looks like this:

The error message is:

Error: OffscreenCanvas is not defined
    u ajax.js:124
    promise callback*u ajax.js:122
    l ajax.js:93
    promise callback*l ajax.js:90
    Kr ajax.js:131
    Zr ajax.js:197
    Gr ajax.js:210
    Qr ajax.js:288
    _spriteRequest load_sprite.js:15
    _loadSprite style.js:173
    _load style.js:151
    _request style.js:126
    u ajax.js:121
    promise callback*u ajax.js:109
    l ajax.js:93
    promise callback*l ajax.js:90
    Kr ajax.js:131
    Zr ajax.js:197
    getJSON ajax.js:207
    loadURL style.js:120
    _updateStyle map.js:974
    setStyle map.js:935
    Map map.js:267
    <anonymous> maplibre-gl-compare-swipe-between-maps.html:72
evented.js:103:20

[HarelM]

Interesting, I did some changes related to of screen canvas in the typescript branch which might cause this.
Feel free to investigate this.
If you mange to add a test that will reproduce this it will be great (browser tests).

[astridx]

Some more examples.

• No effect is visible here. But I see the error messages in the development tools:

maplibre-gl@1.14.0-rc.1
https://astridx.github.io/maplibreexamples/plugins/maplibre-gl-directions_.html
maplibre-gl@2.0.0-pre.1:
https://astridx.github.io/maplibreexamples/plugins/maplibre-gl-directions.html

• Here again the satellite view is not ok:

maplibre-gl@1.14.0-rc.1
https://astridx.github.io/maplibreexamples/plugins/maplibre-style-switcher_.html
maplibre-gl@2.0.0-pre.1:
https://astridx.github.io/maplibreexamples/plugins/maplibre-style-switcher.html

[wipfli]

Thanks for this Astrid. I am wondering in general how much plugins access private implementation details. Was the practice that plugins use only the public API or were shortcuts tolerated?

[astridx]

I am wondering in general how much plugins access private implementation details. Was the practice that plugins use only the public API or were shortcuts tolerated?

I don't think a plugin is the problem in this case. I see error messages here too - here is no plugin involved:

maplibre-gl@2.0.0-pre.1:
https://astridx.github.io/maplibreexamples/quickstart.html

maplibre-gl@1.14.0-rc.1 is fine:
https://astridx.github.io/maplibreexamples/quickstart_.html

I am relatively sure that I did not notice any such error message in the browser console during this test in the docs repo: #209 (comment)

[HarelM]

I see the error in the console but I don't get a white map like you do.
I'll push a fix and a PR now so you can see if it solved your issue or not.

[astridx]

Because we closed the issue so quickly yesterday, I would like to ask again just to be sure: The tests (regressions ) are now also ok for you @chippieTV in Firefox, right?

I now have a different error message,:

This is certainly related to the fact that I can no longer rebuild the tape.js. npm run test-build shows me following error.

maplibre/maplibre-gl-js$ npm run test-build

> maplibre-gl@2.0.0-pre.2 test-build
> tap --node-arg --no-warnings --node-arg --experimental-specifier-resolution=node --node-arg --experimental-json-modules --reporter classic --no-coverage test/build/**/*.test.js

test/build/dev.test.js ................................ 2/2 1s
test/build/min.test.js ............internal/modules/run_main.js:54
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/astrid/git/maplibre/maplibre-gl-js/dist/style-spec/index.es.js' imported from /home/astrid/git/maplibre/maplibre-gl-js/test/build/style-spec.test.js
    at finalizeResolution (internal/modules/esm/resolve.js:246:11)
    at moduleResolve (internal/modules/esm/resolve.js:636:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:726:11)
    at Loader.resolve (internal/modules/esm/loader.js:97:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:47:40)
    at link (internal/modules/esm/module_job.js:46:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
test/build/min.test.js .............................. 48/48
test/build/style-spec.test.js ......................... 0/1
  not ok test/build/style-spec.test.js
    timeout: 30000
    file: test/build/style-spec.test.js
    childId: 2
    args:
      - '--no-warnings'
      - '--experimental-specifier-resolution=node'
      - '--experimental-json-modules'
      - test/build/style-spec.test.js
    stdio:
      - 0
      - pipe
      - 2
    cwd: /home/astrid/git/maplibre/maplibre-gl-js
    exitCode: 1

total ............................................... 50/51
  

  50 passing (6s)
  1 failing

npm ERR! code 1
npm ERR! command failed
npm ERR! command sh -c tap --node-arg --no-warnings --node-arg --experimental-specifier-resolution=node --node-arg --experimental-json-modules --reporter classic --no-coverage test/build/**/*.test.js

Am I doing something wrong? Do someone else see this error too?

---

---

UPDATE:
After I called npm run test-build and the command ended with errors, I ran the tests again despite the errors. I run them in Firefox and Chrome. Chrome is fine. In firefox there is still an error.

[HarelM]

Feel free to reopen, if Firefox console has some errors please share them.
I'm not sure I fully get the current status so please elaborate.
If you manage to find the issue and fix it, even better :-)

[chippieTV]

hi, tested with npm run start-tests I'm getting all 127 passing as above in chrome and FF... so thanks for the fix!

@astridx are you still getting errors with npm run test-build? I just tried and got 57 passed

[astridx]

Only for the record: I have just re-installed everything and now npm run test-build is fine and all 127 tests in the Firefox browser run via npm run start-tests without errors under Ubuntu (It could be that I forgot to switch to Node 14 last time. ).

$ npm run test-build

> maplibre-gl@2.0.0-pre.2 test-build
> tap --node-arg --no-warnings --node-arg --experimental-specifier-resolution=node --node-arg --experimental-json-modules --reporter classic --no-coverage test/build/**/*.test.js

test/build/dev.test.js ................................ 2/2 555ms
test/build/min.test.js .............................. 48/48
test/build/style-spec.test.js ......................... 7/7 6s
total ............................................... 57/57

  57 passing (8s)

  ok