leaflet.fullscreen: v2.0.0 cause error used in react or angular app

I found no information on what changed between the versions. Checked the instructions on how to make it work and did not notice any changes.

So I simply upgraded the version to 2.0.0.

Which leads to this error being thrown:

Control.FullScreen.js:80 Uncaught ReferenceError: screenfull is not defined
    at NewClass._createButton (Control.FullScreen.js:80)
    at NewClass.onAdd (Control.FullScreen.js:40)
    at NewClass.addTo (leaflet-src.js:4757)
    at eval (FullScreenControl.js:22)
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:646)
_createButton @ Control.FullScreen.js:80
onAdd @ Control.FullScreen.js:40
addTo @ leaflet-src.js:4757
eval @ FullScreenControl.js:22
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
eval @ react-dom.development.js:23324
workLoop @ scheduler.development.js:590
flushWork @ scheduler.development.js:545
performWorkUntilDeadline @ scheduler.development.js:157
react_devtools_backend.js:2430 The above error occurred in the <FullScreenControl> component:

    at FullScreenControl (webpack-internal:///./src/components/Projekte/Karte/FullScreenControl.js:40:75)
    at div
    at MapContainer (webpack-internal:///./node_modules/react-leaflet/esm/MapContainer.js:36:3)
    at Karte__StyledMapContainer (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:40:37)
    at MyErrorBoundary (webpack-internal:///./src/components/shared/ErrorBoundary.js:146:3)
    at div
    at Karte__Container (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at Karte (webpack-internal:///./node_modules/mobx-react-lite/es/observer.js:30:80)
    at eval (webpack-internal:///./src/components/Projekte/KarteOrNull.js:18:3)
    at div
    at ProjektContainer__InnerContainer (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at div
    at Pane (webpack-internal:///./node_modules/react-split-pane/dist/index.esm.js:170:5)
    at div
    at SplitPane (webpack-internal:///./node_modules/react-split-pane/dist/index.esm.js:343:5)
    at ProjektContainer__StyledSplitPane (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at div
    at Pane (webpack-internal:///./node_modules/react-split-pane/dist/index.esm.js:170:5)
    at div
    at SplitPane (webpack-internal:///./node_modules/react-split-pane/dist/index.esm.js:343:5)
    at ProjektContainer__StyledSplitPane (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at div
    at ProjektContainer__Container (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at ProjektContainer (webpack-internal:///./node_modules/mobx-react-lite/es/observer.js:30:80)
    at ResizeDetector (webpack-internal:///./node_modules/react-resize-detector/lib/esm/components/ResizeDetector.js:51:5)
    at ResizeDetectorHOC (webpack-internal:///./node_modules/react-resize-detector/lib/esm/hoc/withResizeDetector.js:52:7)
    at withResizeDetector(ProjektContainer)
    at div
    at Projekte__Container (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at Projekte (webpack-internal:///./node_modules/mobx-react-lite/es/observer.js:30:80)
    at div
    at Daten__Container (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at div
    at Layout__ContentContainer (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at div
    at Layout__Container (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19472)
    at Layout (webpack-internal:///./node_modules/mobx-react-lite/es/observer.js:30:80)
    at ErrorBoundary (webpack-internal:///./node_modules/react-error-boundary/dist/react-error-boundary.umd.js:40:37)
    at MyErrorBoundary (webpack-internal:///./src/components/shared/ErrorBoundary.js:146:3)
    at DatenPage (webpack-internal:///./node_modules/mobx-react-lite/es/observer.js:30:80)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:19:1)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:28:5)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@reach/router/es/index.js:361:5)
    at FocusHandler (webpack-internal:///./node_modules/@reach/router/es/index.js:332:19)
    at RouterImpl (webpack-internal:///./node_modules/@reach/router/es/index.js:239:5)
    at Location (webpack-internal:///./node_modules/@reach/router/es/index.js:72:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:34:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:264:5)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:15:5)
    at LocationHandler (webpack-internal:///./.cache/root.js:84:1)
    at LocationProvider (webpack-internal:///./node_modules/@reach/router/es/index.js:92:5)
    at Location (webpack-internal:///./node_modules/@reach/router/es/index.js:72:23)
    at Root
    at SnackbarProvider (webpack-internal:///./node_modules/notistack/dist/notistack.esm.js:749:24)
    at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:42:24)
    at ApolloProvider (webpack-internal:///./node_modules/@apollo/client/react/context/ApolloProvider.js:11:21)
    at App (webpack-internal:///./src/App.js:100:3)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:108:5)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:11:5)
    at FastRefreshOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:27:5)
    at ConditionalFastRefreshOverlay (webpack-internal:///./.cache/root.js:230:3)

This is my component: https://github.com/barbalex/apf2/blob/master/src/components/Projekte/Karte/FullScreenControl.js

The readme mentions that this tool uses https://github.com/sindresorhus/screenfull.js. But that is not listed in package.json as a dependency. Could that be the reason for this error?

I tried installing screenfull and even importing it. But that did not solve the issue.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 19 (13 by maintainers)

Commits related to this issue

Most upvoted comments

How about adding a small (ok, not so small) section at the end of the How ? chapter?

----- start of typescript tipps ------ Tipps for typescript environments:

Installation

npm i leaflet.fullscreen
npm i screenfull
npm i -D @types/leaflet.fullscreen

Usage

import * as leaflet from 'leaflet';
import 'leaflet.fullscreen';

@Component({
    :
})
export class AppComponent implements AfterViewInit {
  private map: leaflet.Map;
  private mapOptions: leaflet.MapOptions = {
    :
    fullscreenControl: true,
    fullscreenControlOptions: {
      position: 'topleft'
    }
  } ;

  ngAfterViewInit(): void {
    this.map = new leaflet.Map('map', this.mapOptions);
  }
    :
}

----- end of typescript tipps ------

+3
BePo65 on Feb 9, 2021

I have created a plugin for react-leaflet v3 to integrate with this awesome repo. Please check this out - https://github.com/elangobharathi/react-leaflet-fullscreen-plugin

+1
elangobharathi on May 25, 2021

Modifications from V1.6 to V2.0 I did identify:

  • implementation of the umd module structure as recommended by the leaflet plugin guide
  • switch to ‘screenfull’ package for displaying the fullscreen map

The code has 2 external dependencies (leaflet + screenfull), but in the iife implementation of the ‘leaflet.fullscreen’ part only 1 is injected (leaflet); ‘screenfull’ is “injected” via global variable (window.screenfull).

This means that the project implements a ‘mixed pattern’ - a little bit ‘umd module’ and a little bit “classic” iife. I think that this design could be improved (😃

Additionally the code for ‘screenfull’ is copied into the ‘lelaflet.FullScreen.js’ file. For iife implementations this is an acceptable pattern (as they use global variables as basis for accessing external modules).

But for module systems this will not work, as in this case the (module-) loaders usually will expect 1 module in 1 file named after the module. This means that the loaders will expect the module ‘screenfull’ in a file (or folder) named ‘screenfull’ and the module ‘leaflet.fullscreen’ in a file (or folder) name ‘leaflet.fullscreen’. To implement this pattern, the javascript file must be split into 2 files.

Besides that, if you copy the source from ‘screenfull’ into your project, then you are also responsible to repeat that steps for every change to ‘screenfull’ (e.g. bug fixes and security issues). The idea of all this module thing is to avoid just that (as this for sure not the fun part of programming).

But I’m sure you know all that points; I just wanted to describe what is the idea behind my pr.

So I modified the project to use ‘screenfull’ as an external reference, inject it in the iife and update the documentation. I prepared examples for a classic (iife) and an angular (with modules) implementation.

Details can be found in pr #79.

+1
BePo65 on Feb 7, 2021

@BePo65 & @barbalex i’d really like to fix this, but i don’t use react or angular, maybe you should ask advice to the author of https://github.com/krvital/react-leaflet-fullscreen or https://github.com/runette/ngx-leaflet-fullscreen ?

Hope we will find a way to fix this asap (for the moment you can rollback your apps to latest v1 tag).

+1
brunob on Feb 2, 2021

I do have the same error in an Angular 9 app. A simplified example can be seen in this Stackblitz.

As far as I understand from the source code, one of the changes in V2.0.0 is the integration of screenfull in this package and exporting it, so that it can be used in other places in the application using leaflet.screenfull.

Another change is the making this package usable in different module systems (commonjs, amd, …). And imho here lays the problem.

If the package is used in a non-commonjs environment, then the screenfull object is written to the window object in line 333. Otherwise it is exported as the default object of this module.

In the “main” section (the extension of leaflet.control) screenfull is used in different places - e.g. in line 80 during construction of the ‘fullscreen button’. Here screenfull is always used as a global variable!

If screenfull is written to the window object, then screenfull can be used this way (if we want to be more explicit, then we would have to write window.screenfull).

But if we are in a commonjs environment, then there is no global variable screenfull and we fail with the error mentioned above.

Possible solutions could be:

  1. add screenfull always to the window object (even if we are in a commonjs environment) - looks more like a hack to me 😃.
  2. transfer not only the leaflet object to the IIFE in line 12, but also the screenfull object - I failed trying to modify the source in my angular app - but this is a typescript environment and has its own topics; e.g. ‘require is unknown’.
  3. and for sure there are more and better solutions 😃

As I use this great extension in my application, I would appreciate it, if this problem could be fixed.

+1
BePo65 on Feb 1, 2021
Read more comments on GitHub
← node-chess: node-chess cannot be imported using common-js syntax
hc: Intermittent discovery issues →