Uncaught ReferenceError: jQuery is not defined in a Symfony project using Webpack Encore

Question

Error in the console

Hello,

I am a beginner in programming and I'm working on a Symfony project using Webpack Encore to manage my assets. I am facing an issue with jQuery in my Firefox console: Uncaught ReferenceError: jQuery is not defined.

Here's the App.js file content:

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

const $ = require('jquery');
// this "modifies" the jquery module: adding behavior to it
// the bootstrap module doesn't export/return anything

// importer sur le js de bootstrap https://symfony.com/doc/current/frontend/encore/bootstrap.html#importing-bootstrap-javascript
require('bootstrap');

require('@fortawesome/fontawesome-free/js/all.js');

// import JS de revolution slider
import './custom/js/rs6.js';

/**
 * help for import Js with webpack
 */

setREVStartSize({ c: 'rev_slider_1_1', rl: [1240, 1024, 778, 480], el: [800, 550, 500, 450], gw: [1390, 1024, 778, 480], gh: [800, 550, 500, 450], type: 'standard', justify: '', layout: 'fullwidth', mh: "0" });
var revapi1,
  tpj;
function revinit_revslider11() {
  $(function () {
    tpj = jQuery;
    revapi1 = tpj("#rev_slider_1_1");
    if (revapi1 == undefined || revapi1.revolution == undefined) {
      revslider_showDoubleJqueryError("rev_slider_1_1");
    } else {
      revapi1.revolution({
        sliderLayout: "fullwidth",
        visibilityLevels: "1240,1024,778,480",
        gridwidth: "1390,1024,778,480",
        gridheight: "800,550,500,450",
        spinner: "spinner0",
        perspectiveType: "local",
        keepBPHeight: true,
        editorheight: "800,550,500,450",
        responsiveLevels: "1240,1024,778,480",
        progressBar: { disableProgressBar: true },
        navigation: {
          onHoverStop: false
        },
        fallbacks: {
          allowHTML5AutoPlayOnAndroid: true
        },
      });
    }

  });
} // End of RevInitScript
var once_revslider11 = false;
if (document.readyState === "loading") { document.addEventListener('readystatechange', function () { if ((document.readyState === "interactive" || document.readyState === "complete") && !once_revslider11) { once_revslider11 = true; revinit_revslider11(); } }); } else { once_revslider11 = true; revinit_revslider11(); }

As a beginner, I would really appreciate it if someone could help me identify the cause of this error and how to resolve it. Thanks in advance!

I was trying to load the JavaScript for Revolution Slider in order to make the slider responsive across all necessary screen formats.

I expected the slider to automatically adjust its size and layout based on the screen size and resolution of the device it is being viewed on. However, due to the Uncaught ReferenceError: jQuery is not defined error, the slider is not functioning as intended, and I am unable to achieve the desired responsiveness.

Answer 1

You are requiring jquery and you assign it to the $ const. The jQuery object is not imported automatically. So to fix your issue, either:

const $ = jQuery = require('jquery');

or change tpj = jQuery; to tpj = $;