Rails webpacker jquery undefined `$` undefined

Question

The following application.js pack for a rails 6.1.3 app

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
//import Rails from "@rails/ujs"
//import Turbolinks from "turbolinks"
//import * as ActiveStorage from "@rails/activestorage"
import "channels"

require('@client-side-validations/client-side-validations')
require("jquery")
require("easy-autocomplete")
require("@zxing/library")
require("foundation-sites")
require("grapheme-splitter")

 import("../src/foundation-datepicker")
 import("../src/promotion_datespan")
 import("../src/sms_counter")
 import("../src/touch_table_highlight")
//Rails.start()
//Turbolinks.start()
//ActiveStorage.start()

is generating numerous issues. Initially it was apparent UJS was somehow broken with the import Rails[...] syntax with the start commands at the end. Interestingly, the foundation javascripts were not running, but the UJS issue was dealt with first.

The present state appears to indicate that jquery is also broken (hampering foundation). Console errors, for a single page include:

jQuery is not defined
at Object../node_modules/easy-autocomplete/dist/jquery.easy-autocomplete.js
at __webpack_require__ (bootstrap:63)
at Module../app/javascript/packs/application.js (application.js:16)
at __webpack_require__ (bootstrap:63)
at ./app/javascript/channels sync recursive _channel\.js$.webpackEmptyContext.keys
[...]
[Violation] Forced reflow while executing JavaScript took 46ms

then, 3 times:

Uncaught ReferenceError: $ is not defined  

for these three instances on the page:

<%= javascript_tag do %>
document.addEventListener("turbolinks:load", function() {

  $input = $('*[data-behavior="autocomplete"]')
    [...]

<script>
$(function(){
    $('#user_date_of_birth').fdatepicker({
    [...]

<script>
  $(document).foundation();

If the issue is properly loading jquery, how can this be fixed?

Answer 1

You can configure $ alias at config/webpack/environment.js

# config/webpack/environment.js

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

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

module.exports = environment