Home » vue » How to fix "Multiple instances of Vue detected!" with parcel.js and bootstrap-vue

How to fix "Multiple instances of Vue detected!" with parcel.js and bootstrap-vue

Posted by: admin November 26, 2021 Leave a comment

Questions:

How do I solve the warning multiple instances of vue detected! please?

My index.html file

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style/cssreset.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="../node_modules/bootstrap-vue/dist/bootstrap-vue.css">
    <link rel="stylesheet" href="style/main.css">
</head>

<body>  
    <div class='app' id='app'>
    </div>
    <script src="code/app.js"></script>
</body>
</html>

My app.js file:

import Vue from '../../node_modules/vue/dist/vue.common'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

const app = new Vue
({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
})

and my package.json file has this (which doesn’t seem to make a difference):

  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  },
Answers:

The alias field in the package.json needs to change to "vue": "/../node_modules/vue/dist/vue.common.js". Parcel will not complain if your alias field is wrong when compiling so you have to be very careful about specifying the correct path yourself, depending on your build command’s root folder.

###

I found two solutions ( maybe this will save time for someone).

1: add this line in the webpack config file :

let whiteListedModules = ['vue', 'bootstrap-vue']

2: Change the import line to :

Vue.use(require('bootstrap-vue/dist/bootstrap-vue.common.min'));

source