Error: Unable to Access Properties of Undefined (Use)

The browser rendering engine executes any JavaScript code present inside the script tags before the entire DOM (which includes various HTML element tags within the body tag) is loaded. This can cause issues if the scripts attempt to access an element by its ID before it has been rendered in the DOM.

Question:

My goal is to initiate a fresh project with
vue js
. It seems like I have all the necessary dependencies that I obtained via the terminal. I successfully downloaded and installed npm, vue, vue-bootstrap, and vue-router. However, an error has occurred at line 7 of router.js, specifically with Vue.use(VueRouter).

Here’s the code for my main.js

import Vue from "vue"
import App from "./App.vue"
import router from "./router.js"
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap-vue/dist/bootstrap-vue.css"
Vue.use(BootstrapVue)
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Here’s my router.js

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "@/pages/Home.vue"
import About from "@/pages/About.vue"
import Contact from "@/pages/Contact.vue"
Vue.use(VueRouter)
export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  
  ]
})

Apologies, the import line for Vue was on the same line as the code indicators, causing it to be truncated. Consequently, the error persists.

The full error is this:

router.js?41cb:7 Uncaught TypeError: Cannot read properties of undefined (reading 'use')
    at eval (router.js?41cb:7)
    at Module../src/router.js (app.js:1261)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1141)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1274)
    at __webpack_require__ (app.js:849)
eval    @   router.js?41cb:7
./src/router.js @   app.js:1261
__webpack_require__ @   app.js:849
fn  @   app.js:151
eval    @   main.js:12
./src/main.js   @   app.js:1141
__webpack_require__ @   app.js:849
fn  @   app.js:151
1   @   app.js:1274
__webpack_require__ @   app.js:849
checkDeferredModules    @   app.js:46
(anonymous) @   app.js:925
(anonymous) @   app.js:928




Solution 1:

To develop an application with Vue 3, one should employ the Vue.createApp function instead of generating a fresh Vue instance.

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

becomes:

const app = Vue.createApp({
      router,
})
app.mount('#app')

Bear in mind that the render API has undergone a change. Previously, it was injected into function arguments after two hours. However, now you need to import it from Vue, as exemplified below.

import { h } from 'vue'
export default {
  render() {
    return h('div')
  }
}

More infos on the docs: here.

Per the comments’ request, I have updated the example by demonstrating the utilization of a plugin on Vue 3.

If we refer to the previous example, it is necessary to apply the .use method prior to the mounting process when using a plugin.

const app = Vue.createApp({
      router,
})
app.use(ThePluginIWantToUse)
app.mount('#app')


Solution 2:

Answer from Hiws:

To utilize BootstrapVue, it’s necessary to either opt for an alternate component library or stick with Vue 2 as it doesn’t currently back Vue 3.

Thanks.

Frequently Asked Questions