TypeError: Super expression must either be null or a function

[krvital]

TypeError: Super expression must either be null or a function

[dngconsulting]

Thanks for your answer. I came also to the same conclusion but when I test your code (with react-leaflet v3 and leaflet 1.7) the compiler says that map.control doesn't exist. How do you inject this "magic" property to map ?

[dngconsulting]

Same here, is there any solution ?

Uncaught TypeError: Super expression must either be null or a function
    at _inherits (vendor.js:140425)
    at vendor.js:140473
    at Object.../../../node_modules/react-leaflet-fullscreen/dist/index.js (vendor.js:140489)
    at __webpack_require__ (runtime.js:80)
    at Module../app/components/XX/XXX.tsx (main.js:14067)
    at __webpack_require__ (runtime.js:80)

Same here, is there any solution ?

Uncaught TypeError: Super expression must either be null or a function
    at _inherits (vendor.js:140425)
    at vendor.js:140473
    at Object.../../../node_modules/react-leaflet-fullscreen/dist/index.js (vendor.js:140489)
    at __webpack_require__ (runtime.js:80)
    at Module../app/components/XX/XXX.tsx (main.js:14067)
    at __webpack_require__ (runtime.js:80)

In my case, it's because react-leaflet-fullscreen is not compatible with the latest version of react-leaflet and its react hooks management. In this last version, the Map component becomes MapContainer and does not have the same methods, which triggers the error.

Try to use react-lealet and leaflet instead to have the map in fullscreen

const [map, setMap] = useState(null)

return(
   <MapContainer whenCreated={m => setMap(m)}/>
   <button onClick={fullScreen}/>
)

const fullscreen = () => {
   if(map !== null)
      map.control.fullscreen({
      position: 'topleft', // change the position of the button can be topleft, topright, bottomright or bottomleft, defaut topleft
      title: 'Show me the fullscreen !', // change the title of the button, default Full Screen
      titleCancel: 'Exit fullscreen mode', // change the title of the button when fullscreen is on, default Exit Full Screen
      content: null, // change the content of the button, can be HTML, default null
      forceSeparateButton: true, // force seperate button to detach from zoom buttons, default false
      forcePseudoFullscreen: true, // force use of pseudo full screen even if full screen API is available, default false
      fullscreenElement: false // Dom element to render in full screen, false by default, fallback to map._container
   })
}