webviz-subsurface-components icon indicating copy to clipboard operation
webviz-subsurface-components copied to clipboard

Remove usage of buffer in SubsurfaceViewer to avoid "Buffer is undefined" error in MergeTextLayer

Open Anders2303 opened this issue 7 months ago • 3 comments

In the webviz project, Im unable to get the WellLogLabels layer to render, with the following error being logged to the console. No labels are shown

deck: update of WellLabelLayer({id: '7d6bd300-ebd8-4a68-afbb-59528e6f2726-labels'}): Cannot read properties of undefined (reading 'isBuffer') TypeError: Cannot read properties of undefined (reading 'isBuffer')
    at Object.free (chunk-NKSH75QN.js?v=6ebe15d1:2028:18)
    at createKDTree (chunk-NKSH75QN.js?v=6ebe15d1:3214:12)
    at WellLabelLayer.updateLabelClusters (chunk-NKSH75QN.js?v=6ebe15d1:3383:59)
    at WellLabelLayer.updateState (chunk-NKSH75QN.js?v=6ebe15d1:3312:12)

The issue seems to stem from the following line in the typedarray-pool package, which is introduced from static-kdtree.

var Buffer = require('buffer').Buffer
// ...
Buffer.isBuffer(...) // <-- Buffer is undefined

This seems unrelated to the LabelsLayer config itself, but rather some environment difference between webviz and the storybooks here, but Im unable to pinpoint exactly what the difference is (for refference, I've been running both projects in node 18, and the problem only shows up on our end).

This might be as simple as the typedarray-pool library being outdated (both it and static-kdtree havent been updated for 6+ years), so we might want to look for a replacement for static-kdtree

Anders2303 avatar May 09 '25 14:05 Anders2303

Hi @Anders2303 buffer is not defined in browser environment. webpack 4 did include all the polyfills, while webpack 5 need to explicitly cherry-pick them.

Unfortunately, I don't find how buffer gets polyfilled :/

I agree we should try to find a replacement for static-kdtree which is stalled and pulls in dependencies.

w1nklr avatar May 12 '25 08:05 w1nklr

Okay, I managed to figure out a workaround to polyfill buffer on our end, using the vite-plugin-node-polyfills package, as per this comment: https://github.com/vitejs/vite/discussions/2785#discussioncomment-7803485, with the plugin configured as such:

// vite.config.ts
{
   plugins: [
     // ...
     nodePolyfills({
       globals: { Buffer: true },
     }),
  ],
  // ...
}

So atleast for us, the problem is handled for now. The point about replacing static-kdtree still stands though, but less of a pressing issue for now. Should I close this, and open a new issue for that?

Anders2303 avatar May 12 '25 10:05 Anders2303

I'm glad to know you found a workaround.

Let's keep this one open, I updated the title to reflect the targeted solution.

w1nklr avatar May 12 '25 12:05 w1nklr