Vuejs - .Shapefile is not a constructor

[elenaVal]

Hello,

I am trying to use this plugin in order to load local shapefiles on a (leaflet) map. Actually, i am using the leaflet library inside the quasar framework which build based on Vuejs. So, when i am trying to import the appropriate js files in a typical html page everything is working properly.

However, when i am trying to call the same functions inside a vue page. I got the error below:

TypeError: "leafletWEBPACK_IMPORTED_MODULE4default.a.Shapefile is not a constructor"

I would like to point out that i have already install leaflet and shpjs. Do you have any idea of i can solve this error?

Thank you in advance

[calvinmetcalf]

this is just a commonjs module (the kind you require) not the kind you import so that's probably your issue, you may have to have some webpack config of some sort

[elenaVal]

Sorry i am not very familiar with the webpack config. However, i have tried to add the .zip shp folder using the following lines:

var base = 'shp/congressL.zip';
  shp(base).then(function(data){ 
          console.log("add data from shape");
        geo.addData(data);
        });

In this case, i got back no errors, but the shapefile - layer is not displayed on the map. Do you think that it is the same issue like before? Thanks

[calvinmetcalf]

you may need to add a .catch(e=>console.log('error',e)) to the end of that before the semicolin

[elenaVal]

Ok now i can see the problem, i got back the following:

error Error: "404" binaryAjax shp.js:18

[elenaVal]

Hello again,

Do you have any idea regarding the error that i am taking back?

error Error: "404"
binaryAjax shp.js:18

[calvinmetcalf]

is the path to the file you are downloading correct ?

[elenaVal]

As far as i can understand, the system cannot find the file. But i cannot understand to reference to it correctly inside a vue page. I have tried to do this by using the following:

var baseL = require('..src/assets/congressL.zip');

But i got back the following:

Module parse failed: Unexpected character '' (1:2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

Thanks.

[calvinmetcalf]

you have to either load the file over http when the app is deployed OR find some webpack loader that will inline the file and allow you to pass it in as a buffer