Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'offset') blockedsource.js

[casper5822]

Hello i have a problem reading a simple tif in angular 11 app with fromUrl.

This is my code:

fromUrl("http://localhost:4200/assets/img/test.tif")
.then(
tiff =>{
console.log(tiff)
})

Version: geotiff 1.0.8

But i get this error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'offset')
TypeError: Cannot read properties of undefined (reading 'offset')
at blockedsource.js:276
at Array.map ()
at BlockedSource.readSliceData (blockedsource.js:267)
at BlockedSource._callee$ (blockedsource.js:171)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:294)
at Generator.next (runtime.js:119)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)
at ZoneDelegate.invoke (zone.js:400)
at resolvePromise (zone.js:1255)
at resolvePromise (zone.js:1209)
at zone.js:1321
at ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (core.js:28578)
at ZoneDelegate.invokeTask (zone.js:433)
at Zone.runTask (zone.js:205)
at drainMicroTaskQueue (zone.js:620)
at ZoneTask.invokeTask (zone.js:520)
at ZoneTask.invoke (zone.js:505)

---

In lib code where the error begins i notice this comment:
// TODO: satisfy each slice
return this.readSliceData(slices, requiredBlocks);

I debug this line and the requiredBlocks is this map (size 1):
0: {0 => undefined}

Can you help me?
Thank you.

[constantinius]

Hi @casper5822

I think the URL should read http://localhost:4200/assets/img/test.tif, right? Not http:localhost:4200/assets/img/test.tif

Maybe this is the issue already. Please let me know if this helps.

[casper5822]

@constantinius the url error is only a typing error here on my github message, thanks i just fix it.
In my code the url is correct. So it's not the problem.

[casper5822]

I made some progress.
I change my code in this:

  this.http.get("http://localhost:4200/assets/img/ponte.tif",{ responseType: 'blob' })
      .subscribe(
        blob =>{
          fromBlob(blob)
          .then(
            tiff =>{
              tiff.getImage()
              .then(
                img =>{
                    const image = img;
                })
            })
        })

---

the file is read correctly and fromBlob works as expected. So the problem is the fromUrl

[constantinius]

I see. Can you provide this image somehow? Otherwise it is hard to debug.

[casper5822]

Sorry i'm late @constantinius.
Yes you can download the geotiff file from here: https://drive.google.com/file/d/1noC9MvPPa9v5w0yL12GmwrIux5PyLoPJ/view?usp=sharing

[jhudson]

Hi @casper5822, I'm facing this same issue loading a COG Geotiff in an Angular 12. In what library and which file did you change the above to fix this?

[casper5822]

@jhudson i didn't fix this bug because i think it's a library problem. I made a workaround downloading the file directly with the standard angular http.get and use fromBlob as you can see in my previous comment.
After this workaround, i had another problem due to the big size of Geotiff file (4GB) so i changed all the logic using the zyx mosaic geotiff splitting and using the map tiles layer to display the geotif on leaflet map.
Hope this can help you.

[jhudson]

Thanks @casper5822. Just to add some more information to this bug report, my use case is -> I have an angular 12 application which is using openlayers to consume a cloud optimized geotiff. If I find a resolution to this bug i'll update this post.

[sboag]

Hi @casper5822 I have found a fix to this bug. In the blockedsource.js file the line let results = await Promise.allSettled((blockRequests.values()); doesn't wait for the blockedRequests Promises to return as .values() returns an IterableIterator not a list. The fix is to wrap the blockRequests.values() in Array.from() as seen here let results = await Promise.allSettled(Array.from(blockRequests.values()));.

Note1: This issue appears to also be present in 2 spots in geotiff.js file.
Note2: .values() is used in 2 locations in blockedsource.js the first one is missing the Array.from while the second isn't.

[constantinius]

@sboag Thanks for the investigation. I will make a patch with that now.

[constantinius]

@casper5822 Can you try with the latest commit to see if the issue is now resolved?

[sboag]

@constantinius can you release the patch?

[constantinius]

@sboag v1.0.9 is now released

[HGS-jonathanantal]

I've updated to 1.0.9 to address having this same issue. However, now when I npm start my ui, I get:

Failed to compile.

./node_modules/geotiff/src/decoder.worker.js (./node_modules/threads-plugin/dist/loader.js?{"name":"0"}!./node_modules/geotiff/src/decoder.worker.js)
ChunkRenderError: Conflict: Multiple chunks emit assets to the same filename static/js/0.chunk.worker.js (chunks 0 and 0)

I've made sure all dependencies (threads, threads-plugin) are up to date and good. Can anyone point me in the right direction? Thanks.

[zipporaSay]

I would like it to be fixed
for now I use

I made some progress.

I change my code in this:

  this.http.get("http://localhost:4200/assets/img/ponte.tif",{ responseType: 'blob' })
      .subscribe(
        blob =>{
          fromBlob(blob)
          .then(
            tiff =>{
              tiff.getImage()
              .then(
                img =>{
                    const image = img;
                })
            })
        })

the file is read correctly and fromBlob works as expected. So the problem is the fromUrl

and it works for me
thanks

[zipporaSay]

This caused performance problems using the above
A really significant problem
use: this.http.get("http://localhost:4200/assets/img/ponte.tif",{ responseType: 'blob' }).....