Search code examples
angulartypescriptdeck.gl

Compile error when trying to use 'load' in fetch method of a layer

I'm trying to perform some logic before a layer is updated and I've found that the method fetch in the layer's props might do it. I'm first trying to get the default behavior to work, then I'll wire in custom logic but I'm failing at this basic test.

Here's the layer's fetch prop

fetch: async (url: string, context: any) => {
    return await load(url, context.layer.loaders, context.loaderOptions);
}

And load is imported as such in my component:

import { load } from '@loaders.gl/core';

Sadly, this does not seem to be target for typescript environments as I get this error when having the include above:

Error: node_modules/@loaders.gl/loader-utils/dist/lib/node/fs.d.ts:1:8

  • error TS1192: Module '"fs"' has no default export.
  • import fs from 'fs';

I think this is due to the fact that it's the wrong syntax for an include in typescript.

How could I include load in my Angular project ? I know deck.gl calls a load function somewhere when updating a layer as I've inspected a call stack of such an update (when I do not try to override fetch):

load @ https://localhost:44305/vendor.js:34188

How could I do the same explicitly in my fetch override ?

Thanks.

Solution

  • The trick was easy. I just created an exported function from a JS file

    import { load } from '@loaders.gl/core';
import { MVTLoader } from '@loaders.gl/mvt';
import { JSONLoader } from '@loaders.gl/loader-utils'


export default async function LoadTile(url, loadOptions) {
    return await load(url, [MVTLoader, JSONLoader], loadOptions);
}

    I could then invoke LoadTile from TypeScript code easily.