Vue-Router throws “ReferenceError: jQuery is not defined”

Question

I'm setting up a new vue project and the router throws in the console the following error message:

"[vue-router] Failed to resolve async component default: ReferenceError: jQuery is not defined

[vue-router] uncaught error during route navigation:

ReferenceError: jQuery is not defined"

I checked if jQuery is imported in the *.vue file: that is the case. Also I reinstalled the jQuery package via npm.

Formular1.vue:

<script>
    import JQuery from 'jquery'
    let $ = JQuery;

    some code...

</script>

router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ 
'./views/About.vue')
    },
    {
      path: '/formular1',
      name: 'formular1',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "formular1" */ 
'./views/Formular1.vue')
    }
  ]
})

I expected the vue file to be executed but instead the error occurs.

All help is appreciated.

Edit: Formular1.vue:

<template>
    <div>
        <table>
            <thead>
                <th v-for="data in datas" :key="data.ED_KBEVLID"></th>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</template>

<script>
    import jQuery from 'jquery'
    let $ = jQuery;

    export default {
        name: 'Formular1',

        data: function () {
            return {
                datas: [],
            }
        },

        methods: {
            lade_daten: function () {
                let vm = this;
                $.getJSON("/api/call_evm.php", function(result){
                   vm.datas = result;
                });
            }
        },

        mounted(){
            this.lade_daten();
        }
    }
</script>

Fab Fab · Accepted Answer · 2019-01-29T11:32:14

jQuery is different from JQuery, probably this is the problem.

Check if everywhere in your code is written in the same way, using the same letter case.

Vue-Router throws “ReferenceError: jQuery is not defined”

1 Answers