# Adding Infinite scroll to sage

**URL:** https://discourse.roots.io/t/adding-infinite-scroll-to-sage/10394
**Category:** sage
**Created:** 2017-09-09T14:15:04Z
**Posts:** 5

## Post 1 by @ralphonz — 2017-09-09T14:15:04Z

Hi People,

I’m trying to add Infinite scroll js to my sage theme but looks like ‘Infinite Scroll’ is not defined:

`init — main.js:38TypeError: t("#bl-full-page").infiniteScroll is not a function. (In 't("#bl-full-page").infiniteScroll({path:".next",append:".portfolio"})', 't("#bl-full-page").infiniteScroll' is undefined)`

I’ve installed infinite scroll using bower. Added the following to manifest.json

```
"infinite-scroll.js": {
  "bower": [
    "infinite-scroll"
  ]
},
```

And the following to setup.php

```
wp_enqueue_script('infiniteScroll', Assets\asset_path('scripts/infinite-scroll.js'), ['jquery'], null, true);
```

Also added infiniteScroll as a dependency for main.js where I’m initiating Infinite scroll under ‘common’ for now with:

```
$('#bl-full-page').infiniteScroll({
      // options
      path: '.next',
      append: '.portfolio',
    });
```

When I look at infinite-scroll.js in the dist folder it looks very sparse and empty so I get the feeling it’s not building properly but what am I doing wrong?

---

## Post 2 by @ralphonz — 2017-09-09T14:31:19Z

Well I discovered that if I add the following to “overrides” in bower.json it works:

```
"infinite-scroll": {
  "main": [
    "dist/infinite-scroll.pkgd.js"
  ]
}
```

But if someone could explain why that would be great…

---

## Post 3 by @Foxaii — 2017-09-09T15:31:08Z

Austin wrote a nice article on this:

> **[How to Override Bower Packages | Roots](https://roots.io/using-bootstrap-with-bower-how-to-override-bower-packages/)**
>
> Learn how to use the unofficial overrides property in bower.json to override the main files defined from a Bower package.

Be sure to read the isotope example at the bottom, as it’s the exact same issue you ran into (and also by MetaFizzy).

---

## Post 4 by @ralphonz — 2017-09-09T16:06:31Z

Thanks Foxaii, I’m new to bower and haven’t used it before except in the context of Sage. I understand now why the override is necessary but still very confused as to why infinite-scroll defines index.js as ‘main’ and not the package.

---

## Post 5 by @Foxaii — 2017-09-10T16:58:40Z

The ambiguity of the main property in the bower spec has lead to its use being interpreted differently over time. There’s more on the issue below:

> [@Best practice when overriding main files of bower sub-dependencies](https://discourse.roots.io/t/best-practice-when-overriding-main-files-of-bower-sub-dependencies/3590):
>
> tldr; I’m asking about best practices when installing a bower dependency which brings along it’s own dependencies. I’ve come across a bit of a problem with the Javascript bower/gulp workflow. In my example, I installed Isotope via bower install isotope --save. Now, Isotope’s bower.json has it’s main attribute set like so: "main": "js/isotope.js" , which is not actually the packaged version. That’s easy enough to override in my main bower.json: "overrides": { "isotope": { "main": ["./di…

[https://github.com/metafizzy/isotope/issues/879](https://github.com/metafizzy/isotope/issues/879)