Node.js Leaflet error

Question

Please help!! I know I'm missing something very simple but I'm new to all this and I read lots of different post and tutorial and can't get whats wrong.

I initiate a new project on Ubuntu 14.04 Navigate to the folder I want my app to be.

This is the steps I take:

sudo apt-get install nodejs-legacy
sudo npm install express-generator -g  (framework)

express -e --ejs (Establece el lenguaje ejs como base) 
https://www.npmjs.com/package/ejs
npm install

To run the app DEBUG=myapp:* npm start

Then load http://localhost:3000/ in your browser to access the app.

npm install --save leaflet
npm install --save leaflet-draw

To here everything works ok!

In app.js I add this single line:

var L = require('leaflet');

and get the ugly error I pasted

/home/diego/Escritorio/fundacion/node_modules/leaflet/dist/leaflet-src.js:9168
}(window, document));
  ^
ReferenceError: window is not defined
    at Object.<anonymous> (/home/diego/Escritorio/fundacion/node_modules/leaflet/dist/leaflet-src.js:9168:3)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/home/diego/Escritorio/fundacion/app.js:10:9)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
npm ERR! weird error 8
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

score 3 · Accepted Answer · answered Apr 06 '16 at 22:25

3

It's an issue with Leaflet itself. Leaflet tries to load the DOM without checking if it's available or not. I think you can load leaflet by simulating the browser in your app.

// Create globals so leaflet can load
GLOBAL.window = {};
GLOBAL.document = {
  documentElement: {
    style: {}
  },
  getElementsByTagName: function() { return []; },
  createElement: function() { return {}; }
};
GLOBAL.navigator = {
  userAgent: 'nodejs'
};
GLOBAL.L = require('leaflet');

You can also tale a look at this: leaflet-headless

answered Apr 06 '16 at 22:25

Sk Arif

1,110
6
17

Thanks, this worked. I don't really understand WHY!! But there it is, it works. – Diego Cassels Apr 06 '16 at 22:40
So mine was the correct answer? Then can you please accept mine as the right answer? – Sk Arif Apr 09 '16 at 19:08

score 1 · Answer 2 · answered Apr 06 '16 at 21:46

1

looks like this module is for browser only. it's on npm so that you can require it in your fronend using browserify or webpack

answered Apr 06 '16 at 21:46

yellowsir

741
1
9
27

yellowsir, thanks do you mean that I have to install browserify with npm install --save-dev browserify and then require the library? I don't get it – Diego Cassels Apr 06 '16 at 21:51
you can do it the old way by downloading the [zip](http://leafletjs.com/download.html) or you use browserify/wabpack to take care of the dependencies – yellowsir Apr 06 '16 at 21:55
still same error, I think you are right, I already did 1 simple node.js leaflet library and got it running... still CAN't get it right here. I install browserify with npm install --save-dev browserify Cant get to install it in the .bin folder – Diego Cassels Apr 06 '16 at 22:20
do you want to run it in the browser or on the server? also did you try removing the node_modules folder and reinstall everything? you should be able to run `./node_modules/.bin/browserify --debug assets/main.js -o public/bundle.js` – yellowsir Apr 06 '16 at 22:31

score 1 · Answer 3 · answered Jul 02 '19 at 11:04

Sk Arif's answer above is the fastest way to do this without introducing a wrapper module.

Here is my implementation with the latest version of leaflet ( > 1.5.x), you'll get an error if navigator.platform and window.screen are not defined:

global.window = { screen: {} }
global.document = {
  documentElement: { style: {} },
  getElementsByTagName: () => { return [] },
  createElement: () => { return {} }
}
global.navigator = { userAgent: 'nodejs', platform: 'nodejs' }

const L = require('leaflet')

Node.js Leaflet error

3 Answers3

Linked