search

GeoTIFF / georaster-layer-for-leaflet

Display GeoTIFFs and soon other types of raster on your Leaflet Map
https://geotiff.github.io/georaster-layer-for-leaflet-example/
Apache License 2.0
283 stars 57 forks source link

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

Open gouthy opened 1 year ago

gouthy commented 1 year ago

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 ` <!DOCTYPE html>

leaflet App
` 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 1 year ago

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 9 months ago

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.