Getting context._parse error when try to upload Shape File

[vishnu947]

In my Vue3 Application, When i try to select/upload shape file using @loaders.gl/shapefile either as Zip File/individual files ( .shp, .SHX, .PRJ, .DBF etc. ) getting the following error :

deckglLayout.vue:616 Error: TypeError: context._parse is not a function
at parseFromContext (@loaders_gl_shapefile.js?v=35336c0c:493:18)
at Object.parseShapefile [as parse] (@loaders_gl_shapefile.js?v=35336c0c:8505:13)
at async parseWithLoader (chunk-FM5TQTUT.js?v=35336c0c:3138:12)
at async parse (chunk-FM5TQTUT.js?v=35336c0c:3101:10)
at async load (chunk-FM5TQTUT.js?v=35336c0c:3275:10)
at async Proxy.handleFileUpload (deckglLayout.vue:551:7)

Can anyone give their inputs on this please. Also below is the method i am using to select the shape/kml file. FYI KML is working fine. 

const handleFileUpload = async (event) => {
  const file = event.target.files[0];

  let loader;
  if (file.name.endsWith(".kml")) {
    loader = KMLLoader;
  } else if (
    file.name.endsWith(".shp") ||
    file.name.endsWith(".SHX") ||
    file.name.endsWith(".PRJ") ||
    file.name.endsWith(".DBF") ||
    file.name.endsWith(".zip")
  ) {
    loader = ShapefileLoader;
  } else {
    console.error("Invalid file format");
    return;
  }


  await load(file, loader)
    .then((data) => {
      // This block executes when the Promise is resolved

      console.log("Data from API response:", data);

      if (loader === KMLLoader) {
        // Handle KML data
        console.log("Data from KML:", data);
      
      } else if (loader === ShapefileLoader) {
        // Handle Shapefile data
        console.log("Data from Shapefile:", data); 
      }

    })
    .catch((error) => {

      console.error("Error:", error);
    });
};

These are my import statements
import { load } from "@loaders.gl/core";
import { KMLLoader } from "@loaders.gl/kml";
import { ShapefileLoader} from "@loaders.gl/shapefile";

These are the verisons i am using:
"@loaders.gl/core": "^4.0.4",
"@loaders.gl/kml": "^4.0.4",
"@loaders.gl/shapefile": "^4.0.4",

[Ib Green]

The ShapefileLoader is complex as it is a multifile loaders. It can only accept a .SHP file as the primary file. The Shapefile loader will then try to load the remaining files. If you are loading from a URL it will automatically try to form URLS for the "sidecar" files.

For local files you need another approach. This is not very well described, but one way to do that is to override the fetch option.:

load(data, ShapefileLoader, {fetch: (filename) => ...});

[vishnu947]

As i tried above approach, with below snippet but still i am facing the same error
As i am rendering .shp file from local in such a case its expecting .cpg file. Can you provide any working example with files if you have any .
const loadShapefile = async (path) => {
// Load the primary .SHP file
const shapefileData = await load(
"src/layouts/DFW_CT_POLY.shp",
ShapefileLoader
// {
// fetch: fetchLocalFile,
// }
);
console.log("shapefileData is:=>", shapefileData);
};

@loaders_gl_shapefile.js?v=35336c0c:493 Uncaught (in promise) TypeError: context._parse is not a function
at parseFromContext (@loaders_gl_shapefile.js?v=35336c0c:493:18)
at Object.parseShapefile [as parse] (@loaders_gl_shapefile.js?v=35336c0c:8505:13)
at async parseWithLoader (chunk-FM5TQTUT.js?v=35336c0c:3138:12)
at async parse (chunk-FM5TQTUT.js?v=35336c0c:3101:10)
at async load (chunk-FM5TQTUT.js?v=35336c0c:3275:10)
at async loadShapefile (deckglLayout.vue?import&t=1703044496578:334:29)

[Ib Green]

I am sorry but I can't debug from snippets.

The test suite in loaders.gl does pass and includes tests that loads from mocked local files:
https://github.com/visgl/loaders.gl/blob/master/modules/shapefile/test/shapefile-loader.spec.js#L42

Loading from local files has a lot of caveats if you are running in the browser, make sure you understand those.

[Ib Green]

Closing due to inactivity. One reason that this could happen is that not all your libraries are using loaders.gl 4.0.

[R G B]

I encountered this as well and what happened was despite having installed @loaders.gl/core 4.x, my app was still using deck.gl's metadependency which is 3.x. I installed @loaders.gl/polyfills@4.x and added import '@loaders.gl/polyfills'; to my deck.gl layer code and that seemed to have resolved the issue.

[Ib Green]

• If you are using loaders.gl 4 with deck.gl v8 (which depends on v3) you may can try to use "resolutions" in your application/json. it is a bit clunky since loaders.gl exposes so many modules, you may have to add a lot of resolutions.
• You could also try a deck.gl 8.10.0-alpha release, however be aware that 8.10 is not planned to become an actual production release as the team is focusing on deck.gl v9.