0

This is my component for Vuejs.

<template>
  <div class="container-fluid">
    <component @clicked="setCurrentView" :is="currentView"></component>
  </div>
</template>

<script>
import Vue from 'vue';
import FaqComponent from "./parts/FaqComponent";
import ListComponent from "./parts/ListComponent";
import NewItemComponent from "./parts/NewItemComponent";
window.jQuery = window.$ =require('jquery')
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css'

export default {
  name: "Ticket",
  components: {FaqComponent, ListComponent, NewItemComponent},
  data: function () {
    return {
      currentView: 'FaqComponent'
    };
  }  
}
</script>

<style></style>

No matter how i try to import bootstrap 3 java script file it gives me this error.

[HMR] Waiting for update signal from WDS...
bootstrap.js?4989:8 Uncaught Error: Bootstrap's JavaScript requires jQuery
    at eval (bootstrap.js?4989:8)
    at Object../node_modules/bootstrap/dist/js/bootstrap.js (chunk-vendors.js:88)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/ticket/Ticket.vue?vue&type=script&lang=js&:6)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/ticket/Ticket.vue?vue&type=script&lang=js& (app.js:950)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (Ticket.vue?56db:1)
    at Module../src/ticket/Ticket.vue?vue&type=script&lang=js& (app.js:1185)

Anyone got this issue before and how to fix it.

I open chunk-vendors.js and inside there is jquery and bootstrap js also, looks like at compile all this dependencies are pulled in, but why it complains that jQuery is missing i have no idea, also soon after import of jQuery i expose it globally in the window.

I already lost 1 day with this issue and google everything. Any ideas will be much apreciated.

Thanks.

Constantin
  • 2,288
  • 2
  • 24
  • 31
  • Yeah well, [don't use jQuery together with Vue](https://stackoverflow.com/questions/51304288/what-is-the-right-way-to-use-jquery-in-react#:~:text=No.,deleting%20stuff%20into%2Ffrom%20them.), that's it. Bootstrap is a jQuery plugin, use [BootstrapVue](https://bootstrap-vue.org/) instead. – Jeremy Thille Aug 24 '21 at 15:01
  • Thanks, i did see that reply, but still had hopes maybe maybe there is another way lol. My legacy project is stuck on bootstrap 3, and on bootrapvue page i see they want bootstrap 4 :( – Constantin Aug 24 '21 at 15:11

0 Answers0