GeoTIFF/georaster-layer-for-leaflet

"Uncaught TypeError: ap.defs is not a function" during vite preview

gouthy opened this issue · 2 comments

gouthy commented

Describe the bug
Thank you very much for developing the package. When installing package through npm and bundling using vite, I get the Uncaught Typeerror. But, if I use the CDN version, there is no error

To Reproduce
Steps to reproduce the behavior:

  1. install vite with vanilla javascript
  2. install leaflet , georaster and georaster-layer-for-leaflet
  3. implement a simple js
    import './style.css' import 'leaflet/dist/leaflet.css' import L from 'leaflet' import parseGeoraster from 'georaster'; import GeoRasterLayer from 'georaster-layer-for-leaflet'; const map = L.map('map', { center: [35.50, -90], zoom: 5 }); L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', { attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.hydroshare.org/resource/9ebc0a0b43b843b9835830ffffdd971e/">Simple lab</a> <a href="https://sdwis.epa.gov/ords/sfdw_pub/r/sfdw/sdwis_fed_reports_public/200"> & EPA</a>; ', subdomains: 'abcd', ext: 'png' }).addTo(map); var url_to_geotiff_file = 'https://s3.amazonaws.com/geoblaze/wildfires.tiff'; parseGeoraster(url_to_geotiff_file).then(result => { var georasterData = result; var gopts = { georaster: georasterData ,opacity: 0.7 ,resolution: 256 ,}; var layer = new GeoRasterLayer(gopts); layer.addTo(map); });

Implement a plain html
` 

<title>leaflet App</title>
<script type="module" src="main.js"></script> `

Implement css html, #map { margin:0; /* This is used to reset any browser-default margins */ height:100vh; /* This is needed to overcome a Chrome bug. */ width:100vw; /* As above. */ }
4. npm run dev - works fine
5. npm run build - works fine
6. npm run preview - throws error "ap.defs is not a function"

Expected behavior
No error.

Desktop (please complete the following information):

  • OS: Windows 11 Home
  • Browser: chrome Version : 111.0.5563.112 (Official Build) (64-bit)
fliperro commented

I have similar error when I use npm run build. My current fix for this is manually override dependencies in package.json

"overrides": {
    "georaster-layer-for-leaflet": {
        "proj4-fully-loaded": "^0.2.0"
    },
    "reproject-geojson": {
        "proj4-fully-loaded": "^0.2.0"
    },
    "reproject-bbox": {
        "proj4-fully-loaded": "^0.2.0"
    }
}

Final step is to delete ./node_modules folder and run npm install again. Make sure you have npm >=8.3.0.

NoamRa commented

For those using Yarn and Vite, the following change to package.json will load new version of proj4-fully-loaded:

"resolutions": {
   "proj4-fully-loaded": "^0.2.0"
}

and then yarn to update node modules.

  • 👍2