New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jQuery - '$' is not defined #36

Closed
vedtam opened this Issue Oct 6, 2016 · 7 comments

Comments

Projects
None yet
5 participants
@vedtam
Copy link

vedtam commented Oct 6, 2016

Hi,

I need jQuery to have Bootstrap working. Following the docs I did:

  1. npm install bootstrap --save
  2. npm install jquery --save
  3. imported both into main.js:
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

And finally added this to webpacj.config.js:

  new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })

Now, bootstrap works. But if I try to test jQuery using:

  $(document).ready(function () {
    alert()
  })

I get this error in terminal:

http://eslint.org/docs/rules/no-undef '$' is not defined
/App Projects/Electron/vue/app/src/components/LandingPageView.vue:42:3
$(document).ready(function () {
^

I use the latest electron-vie build.

By the way, what does the "..." notation mean here:

new Vue({
  router,
  ...App
}).$mount('#app')
@SimulatedGREG

This comment has been minimized.

Copy link
Owner

SimulatedGREG commented Oct 6, 2016

@vedtam

It looks like you got everything setup properly. The error you are receiving is from ESLint's no-undef rule. Since jQuery uses the global variable $ or jQuery, ESLint needs to be configured to know about it. Within your .eslintrc.js file, add them to globals.

.eslintrc.js (docs)

{
  // Other configs...
  "globals": {
    "$": true,
    "jQuery": true
  }
}

The ... is an ES7 Object Rest Spread in this case. Here is the spec, but in short it is a way to join objects together, similar to the use of Object.assign().

let spreader = {
  var1: true,
  var2: false
}

let obj = {
  otherVar: true,
  ...spreader
}

console.log(obj)
/*
  {
    otherVar: true,
    var1: true,
    var2: false
  }
*/
@vedtam

This comment has been minimized.

Copy link

vedtam commented Oct 6, 2016

@SimulatedGREG thank you so much for the nicely elaborated answer! It works like a charm, and now I get the idea behind the "..." 👍

One more little thing. I have created a template and a component (TopMenu), now I need to handle the click event of the menu buttons, but no matter how I try, I get:

[Vue warn]: Property or method "say" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component ) [Vue warn]: Handler for event "click" is undefined.

./LandingPageView/TopMenu.vue:

<template>
  <div>
    <button type="button" name="button" v-on:click="say">BUTTON</button>
  </div>
</template>

main.js:

import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'

import App from './App'
import routes from './routes'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true

const router = new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes
})

/* eslint-disable no-new */
new Vue({
  methods: {
    say: function () {
      alert()
    }
  },
  router,
  ...App
}).$mount('#app')

Thanks!

@SimulatedGREG

This comment has been minimized.

Copy link
Owner

SimulatedGREG commented Oct 6, 2016

@vedtam

The say method should be defined within the same TopView.vue component file within a <script> tag below your <template>. There shouldn't really be any cases where the root Vue vm in main.js should be modified. Make sure to take a look at using Vue components in the official Vue docs.

<script>
  export default {
    methods: {
      say () {
        // your code here...
      }
    }
  }
</script>
@vedtam

This comment has been minimized.

Copy link

vedtam commented Oct 6, 2016

@SimulatedGREG man, you are my saviour! I have turned the docs in and out, but haven't found this "Single File Components" section.

Thanks again, and have a nice day! 👍

@disarticulate

This comment has been minimized.

Copy link

disarticulate commented Aug 7, 2017

you can also define per file globals

<script>
/* global jQuery */
...
</script>
@TejaswiChava

This comment has been minimized.

Copy link

TejaswiChava commented May 8, 2018

<script> import $ from 'jquery' </script>
@alessandroprudencio

This comment has been minimized.

Copy link

alessandroprudencio commented Jul 29, 2018

THANK YOU SOLE SOLUTION SIMPLE AND THAT WORKS

<script> import $ from 'jquery' </script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment