Rails 6 infinite scrolling Uncaught ReferenceError: InfiniteScroll is not defined

Question

I'm adding infinite-scrolling to my app, when scrolling to the end of the page, the library infinite-scroll automatically fetch data and append in the page.

I'm using this library from metafizzy: https://infinite-scroll.com/

Rails 6 app using webpacker to compile js files, libs. I'm installing infinite-scroll in this order:

yarn add infinite-scroll

In app/javascript/packs/application.js:

require("infinite-scroll");

var elem = document.querySelector(".container");
var infScroll = new InfiniteScroll(elem, {
  // options
  path: ".pagination__next",
  append: ".post",
  history: false
});

However, on running app I got this error:

application.js:21 Uncaught ReferenceError: InfiniteScroll is not defined
    at Object../app/javascript/packs/application.js (application.js:21)
    at __webpack_require__ (bootstrap:19)
    at Object.0 (log.js:56)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

Here is a sample project: https://github.com/truongnmt/rails-6-infinite-scroll-sample

Answer 1

use this

var InfiniteScroll = require('infinite-scroll');

var infScroll = new InfiniteScroll('.container', {
  // options
  path: ".pagination__next",
  append: ".post",
  history: false
});

docs