CODEWITHSUNDEEP
javascriptjquerynode.jsnpmmasonry
eignhpants
eignhpants

Reputation: 1771

How do I use npm packages in my projects

I have been using nodejs a lot lately but I keep coming up against a similar error. There are a huge amount of projects out there and a lot of them have npm packages, but whenever I attempt npm install --save some-package I can't seem to figure out how to use them. I don't mean things like express, or mongoose, which I seem to be able to use just fine. I mean things like Bootstrap, or right now, masonry-layout.

For instance I followed the steps on the masonry layout page, and executed the following steps:

npm install --save masonry-layout

Then according to the npm page for masonry-layout I added to following to my general purpose scripts.js files (I am keeping small snippets I need in here until I separate code more logically):

$('.grid').masonry({
  // options... 
  itemSelector: '.grid-item',
  columnWidth: 200
});

However I get the following error in my console on page load:

TypeError: $(...).masonry is not a function
    $('.grid').masonry({

I get similar problems when I try and use other frontend node modules or projects. Am I missing something? I always just end up using the cdn or installing the files manually and I am getting tired of working that way.

Upvotes: 2

Views: 1832

Answers (3)

Trott
Trott

Reputation: 70075

The masonry-layout npm package will install the .js you need into node_modules/masonry-layout/dist/masonry.pkgd.min.js. You need to include that file in a <script> tag on your page.

Upvotes: 0

Sumeet Masih
Sumeet Masih

Reputation: 607

what I did was instead of using masonry package download jQuery masonry script and add it as a "script tag" /js file
and you can form layout easily in css

Upvotes: 0

feeela
feeela

Reputation: 29922

You still need to include those scripts in your page.

Use a good old <script src="…"> or some module loader. (e.g. require.js)

Upvotes: 3

Related Questions