2

Super basic question: I want to install and use the Leaflet module in my Sails.js project. First thing, I install it in using npm i leaflet --save. This successfully updates the dependencies list in the package.json file.

To use it, I write the following code inside a page script:

mounted: async function() {
  //…
  console.log('hello world!!!!');
  var leaflet = require("leaflet");
},

Sails.js complains: Uncaught (in promise) ReferenceError: require is not defined.

Why? If I need to create a hook first, what would it need to contain?

Cesare
  • 9,139
  • 16
  • 78
  • 130

2 Answers2

1

Modules installed through the package manager npm are to be used in the server-side of things (controllers, actions, etc.), not in the browser.

You could use solutions such as Browserify or Webpack, but in this case it's just better to download Leaflet from the website and add the folder under assets/dependencies.

Finally, you can import the JavaScript Leaflet files in layout.ejs (inside the views/layouts folder):

<% /* Auto-injected «script» tags: */ %>
<!--SCRIPTS-->
// ...
<script src="/dependencies/leaflet/leaflet.css"></script>

And for CSS:

<% /* Auto-injected «link» tags: */ %>
<!--STYLES-->
// ...
<link rel="stylesheet" href="/dependencies/leaflet/leaflet.css">

I would guess this is the best approach as the Sails.js starter template is importing Boostrap 4 in the same way.

Cesare
  • 9,139
  • 16
  • 78
  • 130
0

You don't have to require anything, once you npm installed it just add the leaflet.js, leaflet.markercluster.js and leaflet.css in your header and you're done.

You can use the short example of init map from their site and it'll work.

Robertino Vasilescu
  • 1,038
  • 1
  • 7
  • 13
  • Thank you, just to be clear: leaflet.css should be imported in `importer.less`? And what about the other two JS files? – Cesare Mar 23 '20 at 10:06
  • Add them in a separate header (in .ejs format) for the map page and included these there: ``` ``` – Robertino Vasilescu Mar 23 '20 at 13:53
  • but you can include them in your header.ejs if you built sails with web option (uses parasails). If you use sailsas API only and vue runs separately then check here https://stackoverflow.com/questions/41710898/injecting-into-head-in-vue-js or similar – Robertino Vasilescu Mar 23 '20 at 13:55
  • or of course add those js, css to the assets folder and it'll work too, https://sailsjs.com/documentation/concepts/assets – Robertino Vasilescu Mar 23 '20 at 14:02
  • The question asked about using npm, and get the sources from node_modules. If you get the files from the Leaflet CDN/external sources I think that's different. – Cesare Mar 23 '20 at 14:11
  • @Cesare true but you can't require anything in the vue part of a Sails app built with web option. It is not a regular Vue, in such a setting Sails use Parasails, a vue wrapper. So there's no SFC component but a page DOM content, a Parasails js file with the data, methods etc and the API action all three separate but communicating. – Robertino Vasilescu Mar 24 '20 at 08:14