Vuetify Error - "Attempting to access 'extend' property of an undefined object"

Upon installing Vuetify, I encountered an error in the console. My webpack version is v3.6

Uncaught TypeError: Cannot read property 'extend' of undefined
    at Module../src/mixins/themeable/index.ts (index.ts:21)
    at __webpack_require__ (bootstrap:19)
    at Module../src/components/VApp/VApp.ts (vuetify.js:391)
    at __webpack_require__ (bootstrap:19)
    at Module../src/components/VApp/index.ts (index.ts:1)
    at __webpack_require__ (bootstrap:19)
    at Module../src/components/index.ts (index.ts:1)
    at __webpack_require__ (bootstrap:19)
    at Module../src/index.ts (vuetify.js:32032)
    at __webpack_require__ (bootstrap:19)
./src/mixins/themeable/index.ts @ index.ts:21
__webpack_require__ @ bootstrap:19
./src/components/VApp/VApp.ts @ vuetify.js:391
__webpack_require__ @ bootstrap:19
./src/components/VApp/index.ts @ index.ts:1
__webpack_require__ @ bootstrap:19
./src/components/index.ts @ index.ts:1
__webpack_require__ @ bootstrap:19
./src/index.ts @ vuetify.js:32032
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
webpackUniversalModuleDefinition @ universalModuleDefinition:9
(anonymous) @ universalModuleDefinition:10

Has anyone else faced a similar issue? This is how I included vuetify as a plugin:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

I then imported it into my main.js file

import Vue from 'vue'
import App from './App'

import router from './router'
import { store } from './store/store'

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

import vuetify from '@/plugins/vuetify'

Vue.use(BootstrapVue)

Vue.config.productionTip = true

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  vuetify,
  components: { App },
  template: '<App/>'
})

Any assistance on this matter would be highly appreciated

Answer №1

Encountered a similar issue myself when updating to vuetify ^2.5.1 in a current project, only to discover that the version of Vue being used was ^3.0.0. Regrettably, vuetify is not compatible with Vue 3.0 (at least not as of May 2021).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to guide users through a single-page website using the URL bar

I currently have a one-page website with links like <a href="#block1">link1</a>. When clicked, the browser address bar displays site.com/#block1 I am looking to modify this so that the browser shows site.com/block1, and when the link is clicke ...

Tips for locating a specific HTML element within a string

Trying to convert a website into a phonegap app is proving to be challenging for me. When I send a request to the server, it responds with the HTML content as text. My goal is to extract certain HTML elements from this text and then append them to a div in ...

Create a graphical representation of network topology using VueJS

I am in the process of creating a network topology diagram using vueJS and v-network-graph library. Here is an example of the current graph I have achieved: https://i.stack.imgur.com/pTrtW.png What I'm looking to do is add icons on each link betwee ...

Trouble displaying data in Vue Laravel retrieved from method

I've been staring at this code for two days and I feel like I'm missing something obvious. The goal here is to display an array of data in a modal, but for some reason it's not populating correctly when using v-for. If you can spot where I w ...

In the process of transforming my JavaScript code into JQuery

I'm struggling to convert my JavaScript code into jQuery, especially when it comes to calling the function for radio elements by name. The original JavaScript works fine, but I can't seem to get the jQuery version to work correctly. Index HTML ...

Scrolling seamlessly on websites with a single page

I am developing a single-page website that uses different section IDs instead of multiple pages. It's functioning properly, but I want to implement smooth scrolling to the sections rather than just statically jumping to them on the page. Jsfiddle: ht ...

Retrieve JSON information utilizing a specific value stored in the localStorage

After an extensive search online yielded no results, I decided to seek assistance here. This is what I have managed to gather so far: JSON I possess a JSON file containing various lists of words that require retrieval based on user input. The structure ...

A combination of Tor Browser, Selenium, and Javascript for

I have been attempting to use selenium with Tor, but unfortunately it is not functioning correctly. I have come across a library that allows for this functionality, however, it appears to only work with Python. Is there a way to accomplish this using Jav ...

Am I utilizing the htmlspecialchars function properly?

My main objective is to protect the user from malicious code and prevent XSS attacks. I have implemented a series of checks to filter the user's input before storing it in the database. The user input is stored in the $post variable. $post = htmlspec ...

What is the best way to rearrange DOM elements using the output of a shuffle function?

Looking for a solution to shuffle and move around cards in an HTML memory game? Let's analyze the current setup: <ul class="deck"> <li class="card"> <i class="fa fa-diamond"></i> </li> ...

I encountered an error in JavaScript where the function .val() is not recognized on the selected answer, throwing

I'm trying to verify if the selected answer is correct and then add +1 to my user score. However, I'm struggling with why my code isn't functioning as expected. Can someone please point out where the bug is or if there's something else ...

Having trouble accessing the value of an item in a dropdown box on a website

I am currently developing a webpage using HTML5 and Knockout Js. I am facing an issue where I am unable to retrieve the ID of the selected item from a dropdown box in order to insert a value into an SQL table. As an example, consider the following SQL tab ...

The subsequent menu selection will be based on the chosen menu value

I am attempting to accomplish the following: https://i.sstatic.net/JffUWC02.png Essentially, I need a select options menu with labels where selecting an option will display a corresponding value. These values should then become labels for a second selec ...

Keying objects based on the values of an array

Given the array: const arr = ['foo', 'bar', 'bax']; I am looking to create an object using the array entries: const obj = { foo: true, bar: true, bax: false, fax: true, // TypeScript should display an error here becau ...

One way to create dynamic function parameters in JavaScript is by using

Currently, I am in the process of implementing a payment API checkout feature on my order.html page. However, I have encountered an issue where I need to add a script in the head of the HTML document. This script requires me to specify the subtotal amoun ...

Choose the initial search result without actually opening it using jQuery

I am working on an HTML file that contains multiple input fields, which get automatically filled when a corresponding item is selected from the auto-complete feature. Here is a snippet of my HTML code: <table class="table table-bordered"> <u ...

Selecting the appropriate color code based on a specified value

If the value of zoneTempDiff1 falls below 1.5, consider using temp: 1 color. If it exceeds 1.5, opt for temp: 2 color. The same logic applies to all different values such as -1, -2, 0, 1, 2, 3, 4, or 5, each corresponding to a specific color code. In cas ...

Retrieve targeted information from MySql using jQuery AJAX Success

I've got this AJAX code set up to retrieve data from MySQL and display it in the Success block. $.ajax({ type:"POST", url:"index.php", success: function(data){ alert(data); } }); This is my Query $sql ...

Steps to handle the change event of a p:inputText element

In my current setup, I am utilizing p:inputText and have the need to trigger a javascript function that will update the searchField in the backend bean. <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" ...

The outcome is not displayed in the appropriate section of the text

There seems to be an issue as the console is not displaying the response to the input, such as "the answer is correct" or "the answer is either empty or incorrect". <!DOCTYPE html> <html lang="en"> <head> <title>Hello!</ ...