include npm package in laravel project

Hi. Yes, you have to load it in your layout file, or add it to your ./webpack.mix.js file. The folder of the package you installed is located in the ./node_modules folder.

Let me know if you need more information. :)

thanks. So you mean literally:

<script src="/node_modules/marker-clusterer-plus/src/markerclusterer.js"></script>

but the node_modules directory isn't in the public path?

Sorry, nope you can't load it in your blade files directly. You can either copy it to the public directory using webpack, or compile/concat it to one js file. Like this:

mix.scripts([
    'node_modules/marker-clusterer-plus/src/markerclusterer.js',
    // You can add more JS files here.

], 'public/js/app.js')

And then include public/js/app.js file in you blade file.

ok thanks, so I have tried that and I may now be stumbling into a different issue.

Browser console shows:

Uncaught ReferenceError: module is not defined in the app.js file

Is this JS a pure Javascript file, or it needs to be compiled? If it needs to be compiled, use mix.js() instead of mix.scripts().

As I can see from the example, you have to include this file:

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="{{ asset('js/app.js') }}"></script>

And in your webpack.mix.json file the scripts part should look like this:

mix.scripts([
    'node_modules/@google/markerclustererplus/src/markerclusterer.js',
    // You can add more JS files here.

], 'public/js/app.js')

You need to run npm run dev command, then check it in the browser. This part should work, if you get JS error, you probably get it from somewhere else.

@bwrigley If you’ve installed the package, then that will give you a module that you can use in scripts. If you’re using the JavaScript files that come with a default Laravel application then you don’t need to add it to your Webpack file. Instead, pull the module into your resources/assets/js/app.js file:

require('./bootstrap');

require('@google/markerclustererplus');

This will pull in whatever is defined as the default export of the @google/markerclustererplus module. It might also be worth reading up on JavaScript modules, too.

@martinbean Thank you! The import now works fine (I think).

Sadly I now get ReferenceError: MarkerClusterer is not defined. I presume once I've imported as you have shown, I don't also need to reference the script (as with their example below) it's now included anyway right?

Apologies for the basic questions, and yes, I clearly need to read up on JS modules.

Note: Be sure to include markerclusterer.js in your HTML document.

    <script src="/path/to/markerclusterer.js" type="text/javascript"></script>
To use a marker clusterer, create a MarkerClusterer object. In the simplest case, just pass a map to it.

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);
var mc = new MarkerClusterer(map);

@bwrigley I think you can just follow Laravel’s example, and assign the MarkerClusterer object to the window object:

window.MarkerClusterer = require('@google/markerclustererplus');

This will then allow you to use the MarkerClusterer class in subsequent scripts.

@martinbean thank you so much. I clearly need to read up a great deal more.