Uncaught TypeError: $ is not a function - wave.js

Topic: Uncaught TypeError: $ is not a function - wave.js

Louise free asked 3 years ago

Expected behavior I'm trying to load the carrousel plugin, but receive the following error "Uncaught TypeError: $ is not a function". I have also noticed other instances where this error occurs and always in connection with waves.js error.

Actual behavior

Uncaught TypeError: $ is not a function
    <anonymous> mdb.js:7213
    <anonymous> mdb.js:7216
    i waves.js:16
    <anonymous> mdb.js:20789
    i waves.js:16
    <anonymous> mdb.js:9091
    i waves.js:16
    <anonymous> mdb.js:70
    <anonymous> mdb.js:71

Resources (screenshots, code snippets etc.) I'm calling MDBootstrap from a Drupal 9 theme, and the javascripts are called at the end of the page in this order:

<script src="/core/assets/vendor/jquery/jquery.min.js?v=3.5.1"></script>
<script src="/core/assets/vendor/jquery-once/jquery.once.min.js?v=2.2.3"></script>
<script src="/core/misc/drupalSettingsLoader.js?v=9.1.4"></script>
<script src="/sites/default/files/languages/da_vgu0oi-E25gLLorXwTfULu4jsCiRkKBFX2XnRFyExW0.js?qoxpbd"></script>
<script src="/core/misc/drupal.js?v=9.1.4"></script>
<script src="/core/misc/drupal.init.js?v=9.1.4"></script>
<script src="/modules/contrib/pwa/js/serviceworker-load.js?v=9.1.4"></script>
<script src="/themes/contrib/bootstrap_barrio/js/barrio.js?v=9.1.4"></script>
<script src="/themes/custom/my-theme/js/popper.min.js?v=9.1.4"></script>
<script src="/themes/custom/my-theme/node_modules/mdb-pro/js/bootstrap.min.js?v=9.1.4"></script>
<script src="/themes/custom/my-theme/js/barrio.js?v=9.1.4"></script>
<script src="/themes/custom/my-theme/node_modules/mdb-pro/js/mdb.min.js?v=9.1.4"></script>
<script src="/themes/custom/my-theme/js/custom.js?v=9.1.4"></script>
<script src="/themes/custom/my-theme/js/global.js?v=9.1.4"></script>
<script src="/themes/contrib/bootstrap_barrio/js/affix.js?v=9.1.4"></script>

Add comment

icc free answered 3 years ago

0 0 Best answer

This has nothing to do with drupal as I have the same issue with wordpress, it is a JS error. Fix the error in waves.js Line 598.

$(document).ready(function () {

might need to be

jQuery( document ).ready(function( $ ) {

Marcin Luczak staff commented 3 years ago

Hi,

I was unable to reproduce this issue with our freshly downloaded package with default imports. It seems like it really might be an issue with $ not being presented into mdb.js file inside Wordpress configurations. Have you tried our MDB - Wordpress installation tutorial? https://mdbootstrap.com/education/wordpress/theme-3/.

Also could you please try to search and replace $(document) with jQuery( document ) inside your imported mdb.min.js or mdb.js file and inform me whether it is fixing your issues?

Regards, Marcin

Please insert min. 15 characters.

Wenger premium commented 3 years ago

Hi, i am blocked on exactly same problem with sideNav2 on MDB pro! what is the solution please?

Marcin Luczak staff commented 3 years ago

Hi @Wenger,

I can see that you have both MDB4 jQuery and MDB5 Standard version packages. Which package are you using? Sidenav2 is MDB4 component that won't work with MDB5 version.

Keep coding, Marcin

Louise free commented 3 years ago

Sorry. I've tried all of the above solutions and nothing works. Neither $( document ).ready(function() nor jQuery( document ).ready(function( $ )

Marcin Luczak staff commented 3 years ago

Hi @Louise,

For which version of our package this problem occurs? Would you be able to create a snippet showing your code so I could reproduce your problem locally?

Keep coding, Marcin

Add comment

Marcin Luczak staff answered 3 years ago

0 1 Best answer

Hello,

A common issue for showing "Uncaught TypeError: $ is not a function" is that sometimes the component's code is invoked before the page and scripts are loaded. The general fix for that is to place a code related with MDB components inside the following wrapper:

<pre class="prettyprint"><code>$( document ).ready(function() {
 your code here
});
</code></pre>

Have you tried this one?

Unfortunately, we do not support any other frameworks than listed in <a href="https://mdbootstrap.com/docs/standard/integrations/" target="_blank">here</a>, thus I cannot reproduce your problem. 
For integrating MDB products with Drupal you can check <a href="https://javatraininginbangaloreblog.wordpress.com/2017/01/18/integrating-mdbootstrap-in-drupal7/" target="_blank" rel="nofollow">this</a> tutorial from the external site or read one of our other <a href="https://mdbootstrap.com/support/jquery/cant-get-the-javascript-to-do-anything-at-all-in-drupal-any-ideas/" target="_blank">support posts</a> about Drupal with MDB.

Please insert min. 20 characters.

Hello,

A common issue for showing "Uncaught TypeError: $ is not a function" is that sometimes the component's code is invoked before the page and scripts are loaded. The general fix for that is to place a code related with MDB components inside the following wrapper:

$( document ).ready(function() {
    your code here
});

Have you tried this one?

Unfortunately, we do not support any other frameworks than listed in here, thus I cannot reproduce your problem. For integrating MDB products with Drupal you can check this tutorial from the external site or read one of our other support posts about Drupal with MDB.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.19.1
Device: PC
Browser: Firefox
OS: Windows 8.1
Provided sample code: No
Provided link: No

Louise

5Support score
2Questions 0Answers 0Snippets