0

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>

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for the answer! I checked the code and changed the 'JQuery' to 'jQuery'. But sadly it didn't help ...
@Peter Same error? Post the full code for Formular1.vue
@Peter do you use jQuery in the other components (home, about..) ? Have you tried directly import $ from "jquery";?
I use it only in this component and yes, I already tried the direct way.
@Peter Is there any solution to this issue? I am facing the same issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.