使用 webpack 获取“未捕获的类型错误：$(...).tablesorter is not a function”

Question

I'm getting Uncaught TypeError: $(...).tablesorter is not a function after migrating to Rails 6 with Webpack. Here is my environment.js

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    tablesorter: 'tablesorter',
    bootstrap: 'bootstrap/dist/js/bootstrap',
    draggable: 'plain-draggable'
  })
)

module.exports = environment

The other plugins associated are working correctly.

Answer 1

I'm not sure exactly why, but it works by doing like this:

import $ from 'jquery'
import 'tablesorter'

$(document).on('turbolinks:load', () => {
  $('.tablesorter').tablesorter()
})