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

Error [ERR_REQUIRE_ESM] #119

Open nikkopante opened 1 year ago

nikkopante commented 1 year ago

Describe the bug I want build a web map with COG, and found this plugin for Leaflet. I am trying the tutorial and cannot require or import the plugin georaster-layer-for-leaflet correctly. I get this error when importing the plugin.

var GeoRasterLayer = require("georaster-layer-for-leaflet");
                     ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Example\Documents\sinag\georaster-app\node_modules\georaster-layer-for-leaflet\dist\v3\babel\cjs\georaster-layer-for-leaflet.js from C:\Users\Example\Documents\sinag\georaster-app\index.js not supported.
georaster-layer-for-leaflet.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename georaster-layer-for-leaflet.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\Example\Documents\sinag\georaster-app\node_modules\georaster-layer-for-leaflet\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

I have changed the "type": "module" to "type": "commonjs" as this is the simplest between the two proposed solutions. However, this will result to a new error:

  var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer;
                  ^

ReferenceError: window is not defined
    at C:\Users\Example\Documents\sinag\georaster-app\node_modules\leaflet\dist\leaflet-src.js:230:19
    at C:\Users\Example\Documents\sinag\georaster-app\node_modules\leaflet\dist\leaflet-src.js:7:66
    at Object.<anonymous> (C:\Users\Example\Documents\sinag\georaster-app\node_modules\leaflet\dist\leaflet-src.js:10:3)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (C:\Users\Example\Documents\sinag\georaster-app\node_modules\georaster-layer-for-leaflet\dist\v3\babel\cjs\georaster-layer-for-leaflet.js:10:33)

How can I import/require the plugin properly?

To Reproduce Steps to reproduce the behavior:

  1. I have made the repo available here: https://github.com/nikkopante/georaster-app , in case someone wants to check...