在 Webpacker 中使用 jQuery 插件

Question

I have a Rails 5 application with Webpacker.

I am trying to add Infinite scroll using its jQuery plugin but I keep getting:

cars.js:20 Uncaught TypeError: $(...).infiniteScroll is not a function

My cars.js file looks like:

import 'infinite-scroll'

$('.item').infiniteScroll({
      path: `.paginator--cars .next_page a`,
      append: `.car`,
      scrollThreshold: false,
      status: '.page-load-status',
      button: '.view-more-cars-button',
      history: 'push'
    });

My application.js file looks like:

import 'jquery/src/jquery'
import '../js/cars'

My environment.js file looks like:

const { environment } = require('@rails/webpacker')

module.exports = environment

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

Any ideas? This is bugging me so much?

Neil

Answer 1

In this case, you don't need jQuery.

Yes, when using this package in the browser, it makes itself available as a jQuery plugin ( source ).

But, when accessed via Node.js, such as when bundled in Webpack, jQuery is not necessary; this package makes itself available as an AMD or CommonJS export ( source ).

A quick glance at the project indicates the proper usage for you in your cars.js file would be instead:

import InfiniteScroll from 'infinite-scroll'

new InfiniteScroll('.item', {
  // options
})

I'd also assume wrapping the new InifiteScroll(...) expression in a window.addEventListener('DOMContentLoaded', () => {}) callback would make sense as well.