Can't open a Tiff file in CRA with react 17 on Brave

[0xTimepunk]

Hey.

I am running a project with create-react-app with React 17
I want to open a tiff file into loam, but nothing happens.

Using the latest version of loam 1.0.0

import loam from 'loam';

loam.initialize()

const dataset = await loam.open(this.files[0]);

where this.files[0] is the tiff file the user uploaded.

In the console, the following error is also returned:

Is there anything that I should take into consideration? Also please note I am not loading the following files as I thought they are loaded automatically with loam.initialize()

• gdal.js: This initializes the Emscripten runtime and loads the GDAL WebAssembly.
• gdal.wasm: The GDAL binary, compiled to WebAssembly.
• gdal.data: Contains configuration files that GDAL expects to find on the host filesystem.

Thanks for your work

[ddohler]

@0xTimepunk thanks for the detailed writeup! Could you check the following things and see if any of them help?

• Try it with another browser; I haven't specifically tested with Brave, although I think it should probably work.
• Check the network inspector and make sure you see successful requests for gdal.js, gdal.wasm and gdal.data. You're right that loam.initialize() attempts to load them automatically, but it may not be doing the right thing under CRA. If you see errors for these files, that's likely the problem. The best way I've found to integrate these files into CRA is to place symlinks in the public folder pointing to the location of the files in the node_modules folder (which should be node_modules/gdal-js/gdal.js, etc.). It seems kind of like a hack, but Emscripten doesn't know anything about webpack, so treating the GDAL dependencies similar to static media files seems to provide the best results.

Please let me know what results you see from those steps!

[0xTimepunk]

@0xTimepunk thanks for the detailed writeup! Could you check the following things and see if any of them help?

• Try it with another browser; I haven't specifically tested with Brave, although I think it should probably work.
• Check the network inspector and make sure you see successful requests for gdal.js, gdal.wasm and gdal.data. You're right that loam.initialize() attempts to load them automatically, but it may not be doing the right thing under CRA. If you see errors for these files, that's likely the problem. The best way I've found to integrate these files into CRA is to place symlinks in the public folder pointing to the location of the files in the node_modules folder (which should be node_modules/gdal-js/gdal.js, etc.). It seems kind of like a hack, but Emscripten doesn't know anything about webpack, so treating the GDAL dependencies similar to static media files seems to provide the best results.

Please let me know what results you see from those steps!

Thanks for the answer.

I tried in Chrome as well with the same effect.

Checked network inspector and the only file I see loaded is

I don't see any request for gdal.js, gdal.wasm and gdal.data

Could you please elaborate in an example how are you placing the symlinks?

Thanks

EDIT:

Also, do you need any package to load the wasm file once the symlinks are created?

EDIT2:
Just to clarify my "error":

console.log(loam) // WORKS
const dataset = await loam.open(this.files[0]);

console.log(dataset) // Nothing goes to the console, execution stops

with http://download.osgeo.org/geotiff/samples/gdal_eg/cea.tif being the tif in this.files[0]

[ddohler]

Ah! Looks like the request to loam-worker.js is failing as well (or at least, it's redirecting somewhere that probably isn't correct). Try setting up your symlinks like this:

$ ls -l public/ | grep ^l

lrwxrwxrwx 1 user user     33 Nov 19 15:50 gdal.data -> ../node_modules/gdal-js/gdal.data
lrwxrwxrwx 1 user user     31 Nov 19 15:50 gdal.js -> ../node_modules/gdal-js/gdal.js
lrwxrwxrwx 1 user user     33 Nov 19 15:50 gdal.wasm -> ../node_modules/gdal-js/gdal.wasm
lrwxrwxrwx 1 user user     43 Nov 19 15:50 loam-worker.js -> ../node_modules/loam/lib/loam-worker.min.js

[0xTimepunk]

Ah! Looks like the request to loam-worker.js is failing as well (or at least, it's redirecting somewhere that probably isn't correct). Try setting up your symlinks like this:

$ ls -l public/ | grep ^l

lrwxrwxrwx 1 user user     33 Nov 19 15:50 gdal.data -> ../node_modules/gdal-js/gdal.data
lrwxrwxrwx 1 user user     31 Nov 19 15:50 gdal.js -> ../node_modules/gdal-js/gdal.js
lrwxrwxrwx 1 user user     33 Nov 19 15:50 gdal.wasm -> ../node_modules/gdal-js/gdal.wasm
lrwxrwxrwx 1 user user     43 Nov 19 15:50 loam-worker.js -> ../node_modules/loam/lib/loam-worker.min.js

@ddohler Thanks for the help! I fixed my problem by importing the unpkgs directly in the public/index.html as per #58

Closing!