Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gouthy opened this issue Apr 2, 2023 · 2 comments
Open

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

gouthy opened this issue Apr 2, 2023 · 2 comments

Comments

@gouthy
Copy link

gouthy commented Apr 2, 2023

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
Copy link

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
Copy link

NoamRa commented Sep 7, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants