Trouble running wasm-pack examples

[quietlychris]

I was working on getting the WASM-based examples up and running, and have been having some issues with the raster_tiles example. I've verified that I am able to run both the native winit-based raster_tiles and vector_tiles examples.

Per the instructions in the README, I've cloned the main galileo repository, and while still in the base workspace, run

$ wasm-pack build wasm_examples/raster_tiles --target no-modules --release

which seems to print everything out fine along the lines of both building and converting to WASM. I then

$ cd wasm_examples/raster_map
$ firefox index.html

which produces a blank page. However, using view-source:<path_to_file>, I was able to verify that the index.html source is present and has a valid hyperlink to the raster_tiles.js file. I've also done this with a development server as mentioned using Python's http.server

$ cd wasm_examples/raster_map
$ python3 -m http.server 8000 # which prints the following
127.0.0.1 - - [03/Feb/2024 17:58:36] "GET /pkg/raster_tiles.js HTTP/1.1" 304 -
127.0.0.1 - - [03/Feb/2024 17:58:36] "GET /pkg/raster_tiles_bg.wasm HTTP/1.1" 304 -
127.0.0.1 - - [03/Feb/2024 17:58:36] code 404, message File not found
127.0.0.1 - - [03/Feb/2024 17:58:36] "GET /favicon.ico HTTP/1.1" 404 -

and I can again see that the correctly source files are being seen by the browser.

I have tried this on both Firefox 120.0.1 and Chromium 105.0.5195.125 on Pop!_OS 22.04.

Also, just wanted to say that this project is already looking awesome and I'm very excited about the possibility of doing GIS visualizations directly in Rust using a library like this!

[Maximkaaa]

Hi, @quietlychris . The command you use serves files from 0.0.0.0:8000, which is considered not secure by browsers, so they block all requests to https resources, so you cannot get the tiles from Internet.

Run your server with this command:

python3 -m http.server -b localhost 8000

[Maximkaaa]

Closing this as not requiring any action.

[quietlychris]

I apologize for the basic questions, but I'm still seeing the same behavior with the suggested command

$ python3 -m http.server -b localhost 8000
Serving HTTP on ::1 port 8000 (http://[::1]:8000/) ...
::1 - - [06/Feb/2024 13:06:02] "GET / HTTP/1.1" 200 -
::1 - - [06/Feb/2024 13:06:02] "GET /pkg/raster_tiles.js HTTP/1.1" 200 -
::1 - - [06/Feb/2024 13:06:02] "GET /pkg/raster_tiles_bg.wasm HTTP/1.1" 200 -
::1 - - [06/Feb/2024 13:06:02] code 404, message File not found
::1 - - [06/Feb/2024 13:06:02] "GET /favicon.ico HTTP/1.1" 404 -

and am still seeing a blank page on http://localhost:8000 and http://[::1]:8000/ and ofc HTTPS is not valid for either one.

I'm just following up on this bc I expect that if I'm confused, other users might find themselves in the same position in the future.

[Maximkaaa]

Hmm... Do you see any errors in the browser dev console?

[quietlychris]

So the output of the dev console in Firefox is (accessed via Ctrl + Shift + K is

panicked at /home/user/galileo/galileo/src/layer/data_provider/file_cache.rs:43:45:
called `Result::unwrap()` on an `Err` value: Error { kind: Unsupported, message: "operation not supported on this platform" }

Stack:

__wbg_get_imports/imports.wbg.__wbg_new_abda76e883ba8a5f@http://[::1]:8000/pkg/raster_tiles.js:449:21
@http://[::1]:8000/pkg/raster_tiles_bg.wasm:wasm-function[3923]:0x2652ea
@http://[::1]:8000/pkg/raster_tiles_bg.wasm:wasm-function[1787]:0x1c5061
@http://[::1]:8000/pkg/raster_tiles_bg.wasm:wasm-function[2913]:0x2564d2
@http://[::1]:8000/pkg/raster_tiles_bg.wasm:wasm-function[2167]:0x1ef3f4
@http://[::1]:8000/pkg/raster_tiles_bg.wasm:wasm-function[479]:0x355de
@http://[::1]:8000/pkg/raster_tiles_bg.wasm:wasm-function[1121]:0x17bc42
@http://[::1]:8000/pkg/raster_tiles_bg.wasm:wasm-function[3407]:0x25cce8
__wbg_adapter_84@http://[::1]:8000/pkg/raster_tiles.js:257:10
real@http://[::1]:8000/pkg/raster_tiles.js:218:20

followed by

Uncaught RuntimeError: unreachable executed
    __wbg_adapter_84 http://[::1]:8000/pkg/raster_tiles.js:257
    real http://[::1]:8000/pkg/raster_tiles.js:218
[raster_tiles_bg.wasm:1855623:1](http://[::1]:8000/pkg/raster_tiles_bg.wasm)
    <anonymous> http://[::1]:8000/pkg/raster_tiles_bg.wasm:1855623
    <anonymous> http://[::1]:8000/pkg/raster_tiles_bg.wasm:2450642
    <anonymous> http://[::1]:8000/pkg/raster_tiles_bg.wasm:2028532
    <anonymous> http://[::1]:8000/pkg/raster_tiles_bg.wasm:218590
    <anonymous> http://[::1]:8000/pkg/raster_tiles_bg.wasm:1555522
    <anonymous> http://[::1]:8000/pkg/raster_tiles_bg.wasm:2477288
    __wbg_adapter_84 http://[::1]:8000/pkg/raster_tiles.js:257
    real http://[::1]:8000/pkg/raster_tiles.js:218

which I'm assuming is the root cause. The platform is the same as listed above; as far as I'm aware, there shouldn't be anything particularly exotic about my particular set-up in terms of a GPU or weird hardware abstractions or anything.

[Maximkaaa]

So this is not a browser security issue after all. It seems that you were unlucky enough to clone the project right in between me breaking wasm builds and fixing them. This error means that raster tile layer tries to use file cache, which it cannot do because browsers don't allow access to the file system. In more recent versions the logic for initializing raster tile layers uses conditional compilation based on target architecture to make sure this does not happen.

So to make the examples run, just pull the newer version and build it again. Not though, that the raster_tiles example was changed to demonstrate future FFI and uses a different build approach now (using npm scripts). But you can build other examples the same way you did before and they should work.

[quietlychris]

Okay, so I was able to follow the new instructions in the README to build using wasm-pack and npm. Aside from some dependency audit warnings, those all seem to build correctly. However, I'm still receiving a blank page, with the error from Firefox's dev console:

Error importing `index.js`: TypeError: galileo__WEBPACK_IMPORTED_MODULE_0__.MapBuilder is undefined
    <anonymous> webpack:///./index.js?:6
    js http://localhost:8080/0.bootstrap.js:22
    __webpack_require__ http://localhost:8080/bootstrap.js:64
[bootstrap.js:5:23](webpack:///./bootstrap.js?)
    <anonymous> webpack:///./bootstrap.js?:5

the steps I used were

$ git clone git@github.com:Maximkaaa/galileo.git
$ cd galileo
$ wasm-pack build --target no-modules --release galileo
$ cd wasm_examples/raster_tiles
$ npm install
$ npm run build
$ npm run start
# which is now serving content on http://localhost:8080

Also, I'm curious, for folks might be interested in staying in Rust-only land with GUI support via something like egui, it should still be able to set this all up via wasm-pack using the same methods in the other wasm_examples, right?

[Maximkaaa]

You can keep things as rusty as they were, all the other examples work as before. There's even a new example (both native and web) that shows how to use egui with Galileo.

I'll check out the build for raster tiles through npm a little later. I'll reopen this issue for now, just in case the build is actually broken.

[Maximkaaa]

It turns out I've made a mistake in the new raster_tiles example build instructions. For that example you need to build Galileo without --target no-module flag.

I've updated the build instructions. Thanks for trying this out. It's quite hard to keep track of everything on my own...

[quietlychris]

Sure thing! I've confirmed that running the commands from above with the --target no-module flag omitted does render things properly.