Encountering the error message "The function $(...).tablesorter is not defined" while using webpack

After updating to Rails 6 with Webpack, I'm encountering the error message 

Uncaught TypeError: $(...).tablesorter is not a function
. Below is the snippet of my environment.js file:

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

All other plugins seem to be functioning correctly.

javascriptruby-on-railsnpmwebpackyarnpkg

Answer №1

For some reason, this is how it effectively works:

import $ from 'jquery'
import 'tablesorter'

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty creating JSON data following retrieval of rows by alias in MySQL

I am encountering an issue while trying to fetch rows from two tables using a JOIN and aliases. The problem arises when I attempt to convert the fetched rows into JSON data and assign them to a JSON array. Below is the code snippet: $personal = $db->p ...

javascriptphpjquerymysqljson

The Node.js server delivers a different object to the client

I'm facing an issue while trying to send an object from the client to a Node.js server. Here is my Ajax call: $.ajax({ url: config.api.url, type: config.api.method, contentType: config.api.contentType, // application/x-www-form-urlencoded; cha ...

javascriptjsonnode.jsajaxobject

HTML elements not displaying in Ajax form

I am encountering an issue with my ajax based feedback form where the form is displaying the html from the response instead of processing it correctly. Here is the JQuery code: $(document).ready(function() { var form_holder = $('#form-holder'); ...

javascriptphpjqueryhtmlajax

Retrieving binary content from an HTML5 Canvas using base64 encoding (readAsBinaryString)

Is it possible to extract binary data from an HTML Canvas? Currently, I have the following HTML code displaying an input file and a canvas below it: <p><button id="myButton" type="button">Get Image Content</button></p> <p>In ...

javascripthtmlhtml5-canvasfileapi

Guide on how to automatically direct users to a page upon successful login in ReactJS

How can I redirect to the homepage after a successful login in ReactJS? Also, how can I display an error message when a user enters incorrect credentials? I have attempted the following code, but it does not successfully redirect to the homepage or show ...

javascriptreactjs

Encountered an issue while working with npm vue-cli

Operating System: Windows 10 Node Version: v8.9.2 NPM Version: 5.5.1 I successfully installed vue-cli using NPM, but encountered an error when trying to run 'npm run dev' command. Below is the error message: npm ERR! code ELIFECYCLE npm ERR! ...

javascriptnpmvue.jsjavascript-frameworkvue-cli

Unraveling the Distinctions: Identifying an Admin vs. a User within the API

When working with the express framework, I encounter a situation where I need to restrict access to certain API endpoints. For example, I have this line in the API: router.delete('/user',(req, res) => { //deleting...} Now, I want only an Adm ...

javascriptnode.jsexpress

Guide on building a Vue Js input name field with string-variable schema

I have a project using VueJs and I am looking to extract JavaScript variables to create hidden fields. My goal is to set the name of the field based on the index of the variable, following a zig-zag naming schema. For example: <input type="text" nam ...

javascriptvue.jsvuejs2

`Count the number of rows needed to accommodate text line breaks within a div element`

Is there a method to determine the number of lines that text breaks into using the CSS property word-break: break-all? For example, if I have a div like this: <div>Sample text to check how many lines the text is broken into</div> And the corr ...

javascriptjqueryhtmlcsshyphenator

The error message "The default exports (imported as 'Vue') could not be found in 'vue' while integrating Ruby on Rails with Vue. The webpacker setup was configured by running install:vue command

Take a look at the following code snippet from hello_vue.js file import Vue from 'vue' import App from '../app.vue' document.addEventListener('DOMContentLoaded', () => { const app = new Vue({ render: h => h(App) ...

ruby-on-railsvue.js

Is Javascript Profiling a feature available in Firebug Lite?

Exploring the world of JavaScript profiles, I decided to step away from the usual Chrome Developer tools. Can Firebug Lite for Google Chrome provide Javascript Profiling functionality? ...

javascriptfirefoxfirebug

Exploring the depths of Rx.ReplaySubject: Techniques for delaying the `next()` event

Confused Mind: Either I'm mistaken, or the whiskey is starting to take effect. (I can't rule out the possibility that I'm just going crazy. Apologies for that.) Assumption: My assumption was that ReplaySubject would emit a single value eve ...

javascripttypescriptrxjstop-level-awaitreplaysubject

Change the time format from '18/10/2016 10:31:22PM' to '18/10/2016 22:31:22' in JavaScript

var currentDate = new Date('18/10/2016 10:31:22PM'); var formattedTime = currentDate.toLocaleTimeString(); alert(formattedTime); This code is returning an 'invalid date' output. To fix this issue, I need to convert the date format to ...

javascript

"Master the art of drag and drop in Dojo: Implementing a handler for the drop

My list is structured as follows: <div dojoType="dojo.dnd.Source" id="myList"> <div class="dojoDndItem">item 1</div> <div class="dojoDndItem">item 2</div> <div class="dojoDndItem">item 3</div> </div ...

javascriptdrag-and-dropdojo

Unusual hue in the backdrop of a daisyui modal

https://i.stack.imgur.com/fLQdY.png I have tried various methods, but I am unable to get rid of the strange color in the background of the Modal. Just for reference, I am using Tailwind CSS with Daisy UI on Next.JS. <> <button className='btn ...

javascriptcssreactjstailwind-cssdaisyui

Automating the process of transferring passwords from Chrome Password Manager to a Chrome Extension

Embarking on my first chrome extension journey, I have been developing a password manager app that offers enhanced functionalities beyond the default chrome password manager. A recent request from a client has come in, asking me to gather all passwords fr ...

javascriptangularjsgoogle-chromegoogle-chrome-extensiongoogle-chrome-app

An error was encountered: SyntaxError - An unexpected token '!' was found

I am having trouble creating a react cluster map. I encountered a SyntaxError, and I'm not sure what went wrong. Initially, my map was working fine, but after using the use-supercluster npm package, it started showing an Uncaught SyntaxError: Unexpect ...

javascriptreactjsmarkerclusterer

This API is no longer compatible with India's payment system, so you won't be able to process payments using Next.js, Strapi, or

I am currently developing a website using "next js" as the frontend and "Strapi" as the backend for a simple ecommerce project. The payment gateway being utilized is "Stripe". I have implemented the checkout code in both the frontend and backend, and every ...

javascriptnext.jsstripe-paymentsstrapistripe-payments-js

Steps to include a HTML webpage within another page

I need assistance with a scenario involving two separate HTML pages on different servers. Merchant Form - Server A Payment Form - Server B Here's the desired scenario: The user completes all necessary fields on the Merchant Form and clicks submit. ...

javascripthtmljqueryajax

Issue: ray.intersectScene does not exist as a function

For my basic WebGL project, I have been utilizing the sim.js code and its components. Recently, when I attempted to use the frustum class (refer to this question), it required updating my three.js. Unfortunately, this caused an issue: TypeError: ray.inter ...

javascriptthree.jswebgl