Menu icon Foundation
Adding packages via Bower, how?

Hi there. I wrote a week ago regarding enquire.js but then realized that Foundation has something similar, so I went with there function. Now I wanted to add Masonry to the bower_components file.

In the CLI within the root folder I install masonry with the following command:

bower install masonry --save

This seemed to work. Masonry and all of it's dependency where installed in the bower_components folder, and the bower.json file was updated.

{
  "name": "foundation-ssg",
  "version": "1.0.0",
  "authors": [
    "ZURB <[email protected]>"
  ],
  "description": "Static site generator for Foundation for Sites.",
  "main": "gulpfile.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "foundation-sites": "~6.2.3",
    "motion-ui": "~1.2.2",
    "masonry": "^4.1.0"
  },
  "private": true
}

I then proceeded to update the config.yml file with: 

# Paths to your own project code are here
    - "bower_components/masonry/masonry.js"

 

Unfortunately though I still get an error. This happens even if I don't try to initialise the package.

masonry.js:40 Uncaught TypeError: Cannot read property 'create' of undefined

factory @ masonry.js:40
(anonymous function) @ masonry.js:27
(anonymous function) @ masonry.js:9

I have gotten it to work when I use the "Basic Template: includes a Sass compiler" but I can't get it working with "ZURB Template: includes Handlebars templates and Sass/JS compilers" and it is driving me crazy. I think that there is some sort of issue that Babel is creating, but honestly I have no clue.

Thanks for your help. 

masonryHandlebarsFoundationZurb+Templateconfiggulpbower

Hi there. I wrote a week ago regarding enquire.js but then realized that Foundation has something similar, so I went with there function. Now I wanted to add Masonry to the bower_components file.

In the CLI within the root folder I install masonry with the following command:

bower install masonry --save

This seemed to work. Masonry and all of it's dependency where installed in the bower_components folder, and the bower.json file was updated.

{
  "name": "foundation-ssg",
  "version": "1.0.0",
  "authors": [
    "ZURB <[email protected]>"
  ],
  "description": "Static site generator for Foundation for Sites.",
  "main": "gulpfile.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "foundation-sites": "~6.2.3",
    "motion-ui": "~1.2.2",
    "masonry": "^4.1.0"
  },
  "private": true
}

I then proceeded to update the config.yml file with: 

# Paths to your own project code are here
    - "bower_components/masonry/masonry.js"

 

Unfortunately though I still get an error. This happens even if I don't try to initialise the package.

masonry.js:40 Uncaught TypeError: Cannot read property 'create' of undefined

factory @ masonry.js:40
(anonymous function) @ masonry.js:27
(anonymous function) @ masonry.js:9

I have gotten it to work when I use the "Basic Template: includes a Sass compiler" but I can't get it working with "ZURB Template: includes Handlebars templates and Sass/JS compilers" and it is driving me crazy. I think that there is some sort of issue that Babel is creating, but honestly I have no clue.

Thanks for your help. 

Rafi Benkual over 3 years ago

That's weird - I just recently added masonry to a project with no errors. I did a bower install. Here is a tutorial to follow for help: http://zurb.com/university/lessons/adding-on-to-a-great-foundation

Shannon Schärer over 3 years ago

I was so excited to get your response. I re-checked my code, it looks good, so I thought I would try to install Owl Carousel from the tutorial to see if I could get that working. It worked perfectly. I also changed the reference in the config.yml file to:

# Paths to your own project code are here
    - "bower_components/masonry/dist/masonry.pkgd.min.js"

 

Masonry however still doesn't work. :-(

Are you using the "Basic Template" or the "Zurb Template?" I can get it working with the basic template but not with the zurb template. I see in your example that you are referencing the plugin at the bottom with the rest of the scripts, which leads me to conclude that you are using the basic template. Please do correct me if I am wrong. :-)

https://gist.github.com/rafibomb/d07a2dac74416dd768e9

Could you maybe tell me how you installed it, step for step? The error is being thrown even before initialisation. I'm totally bummed out.

David Castro over 3 years ago

I had the same problem and it turns out it was just the order of the files in config.yaml. I had it set up like this:

# Paths to your own project code are here
- "src/assets/js/!(app).js"
- "src/assets/js/app.js"
- "bower_components/masonry/dist/masonry.pkgd.js"

So I was trying to use it in app.js before it was defined in the next file. I changed it to:

# Paths to your own project code are here
- "bower_components/masonry/dist/masonry.pkgd.js"
- "src/assets/js/!(app).js"
- "src/assets/js/app.js"

and it works now.