Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uncaught ReferenceError: $ is not defined (VueJS)

I've started a VueJS project with:

vue init webpack my-project

And got jQuery with npm:

npm install jquery

And i put this line on my main.js file:

window.$ = window.jQuery = require('jquery')

Either way, i can't use this piece of code: (from semantic ui)

$('.ui.rating')
  .rating()
;

Because i get this error:

Uncaught ReferenceError: $ is not defined

Any idea why this is happening ?

like image 653
Enrique Bermúdez Avatar asked Jan 30 '18 14:01

Enrique Bermúdez


People also ask

How do I fix uncaught ReferenceError is not defined?

The $ is not defined ReferenceError usually arises when jQuery is not loaded and JavaScript is not recognizing the $ symbol. To solve this error, first, use jQuery CDN link inside the head section or download the jQuery file and use the jQuery file link inside the head section.

Is not defined in Vuejs?

Uncaught ReferenceError: $ is not defined This is error is most of the time related to not having installed Jquery or not having it declared properly. You may need to do require('jquery'). default but don't quote me on that. You should really be using import here I think, though.

How do I fix JavaScript reference error?

Reference errors in Javascript are mainly thrown when an attempt is made to reference a variable that does not exist or is out of scope. Therefore, in the majority of cases, a ReferenceError can be fixed by making sure that the referenced variable is defined correctly and is being called in the correct scope.

What is uncaught ReferenceError in JavaScript?

The most common reason behind the error "Uncaught ReferenceError: $ is not defined" is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you're executing the jQuery code only after jQuery library file has finished loading.


1 Answers

If you have jQuery installed via npm, just import it like this:

import $ from 'jquery'

And inside your methods, you can start using $ as:

methods: {
  getFoo() {
    $( "div.foo" ).html();
  }
}
like image 121
samayo Avatar answered Sep 28 '22 03:09

samayo