0

I’m trying to use Leaflet inside a Pluggable Widget in Mendix, but I keep running into issues. The main problem is that I get the following error:   🚨 “TypeError: i is not a function”   I’ve tested the same setup in a standalone React app, and it works fine, so the issue seems to be specific to Mendix. Here’s what I’ve tried so far:   ✅ Importing Leaflet the standard way: import L from "leaflet"; import "leaflet/dist/leaflet.css"; Also the react way: import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet" import "leaflet/dist/leaflet.css" ✅ Dynamically injecting the Leaflet script to avoid conflicts with Dojo: if (!window.L) { const script = document.createElement("script"); script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; script.async = true; script.onload = () => console.log("Leaflet loaded"); document.head.appendChild(script); } ✅ Switching to the Mendix React Client (but the error persists).   I also tried to create a custom index.html and import the script there, but when trying on a blank react project, I could get it to work only using the react-leaflet without importing the script in the html.   I suspect the problem might be due to Dojo conflicting with Leaflet’s module system, but I’m not sure what the best approach is.   Has anyone successfully used Leaflet or React-Leaflet inside a Mendix Pluggable Widget? Any ideas on how to properly integrate it without conflicts?   Thanks in advance for any insights! 🚀

asked 2025-03-12

1 answers