Bizarre issue encountered while attempting to upgrade a program to Vue2

Upon running vue-migration-helper and updating everything, I encountered the error below.

vue2.default.user is not a function

Console error: 

Uncaught TypeError: _vue2.default.use is not a function
    at eval (eval at <anonymous> (app.js:1624), <anonymous>:153:15)
    at Object.<anonymous> (app.js:1624)
    at __webpack_require__ (vendor.js:53)
    at webpackJsonpCallback (vendor.js:24)
    at app.js:1

Does anyone know what may have caused this error?

______ UPDATE It seems like the issue is related to the new Vue() not being a function, possibly due to Laravel-Elixir-Webpack setup.

https://i.sstatic.net/CW8gH.png

javascriptlaravel-5vue.jsvuejs2laravel-elixir

Answer №1

For those who may encounter a similar issue in the future, I was able to resolve my problem by switching from Laravel Elixir to the newer Laravel Mix.

In addition, it is important to include vue-template-compiler in your package.json file with the same version as Vue to ensure compatibility.

Currently, I am using Vue 2.3.0 and vue-template-compiler 2.3.0.

If you have any questions regarding webpack.config.js, feel free to check out the Gist of my current setup here

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

Getting rid of background color in a tooltip using Material UI

I'm currently tackling an issue with Material UI's tooltip. I can't seem to find a way to make the background of the tooltip completely transparent. By default, it displays with a grey background and white text. Changing the background color ...

javascriptcssreactjsmaterial-ui

Implementing the Disabled Attribute on a Dynamically Generated Button Using React

My QWERTY keyboard is dynamically rendered through a component as Bootstrap buttons using bootstrap-react. Each button does not have an ID to avoid relying on IDs in React. When a letter button is clicked, it triggers an onClick event passed as props back ...

javascripthtmlreactjsjsxreact-bootstrap

What is the best way to selectively remove Tailwind styles from a single Vue component?

Currently, I find myself in a situation where I need to eliminate the broad impact of the global Tailwind CSS framework from a single specific component. My goal is to uphold a clean and concise HTML document free from unnecessary styling influences. To a ...

vue.jstailwind-csstailwind-ui

The method in Vue that retrieves and updates the value of a v-model

I'm in the process of developing a form that calculates rates per hour. My goal is to have all the categories listed in my database rates table, and when new categories are added, the corresponding fields on the form should expand automatically throug ...

vue.jsvuejs2

The type '{ }' does not include the properties 'params', 'isExact', 'path', 'url' from the 'match<Identifiable>' type

Currently, I am utilizing react router and typescript in order to extract the id variable from a route for use in a component. However, typescript is raising an issue: The type '{}' lacks the following properties found in type 'match' ...

javascriptreactjstypescript

Executing a query with a `has many` relationship in MongoDB: Step-by-step guide

In my setup with Node, Express, and backbone, I am successfully retrieving records from MongoDB collections using simple queries. However, I am struggling to understand how to query more complex data, such as the one below: db.employees.aggregate( [ ...

javascriptnode.jsmongodbexpressbackbone.js

When working with Angular1+ ES6 and using controller as a class, the utilization of Dependency Injections may be ambiguous within controller functions

I recently started using ES6 class for defining my controller, and here is the syntax I am using: export class SearchBarController { constructor($log) { 'ngInject'; $log.debug("Hello"); } textTyped($log){ $ ...

javascriptangularjsdependency-injectionecmascript-6

Is it possible for the ajax url option to accept an array of URLs rather than just one?

Is there a way to retrieve and store data from multiple JSON URLs in an array? <script type="text/javascript"> urls = ["https://spreadsheets.google.com/feeds/list/1RsiDuydBBHyu4OBjlxq1YH6yT3qcJDMB6-YKU-xxd_k/od6/public/basic?hl=en_US&alt=jso ...

javascriptjqueryajaxarraysjson

What is the best approach to managing this scenario where the document is ready?

Just a quick question. I have several JavaScript functions written in this format: var app={ start:function(){ //do something and call calculate }, //end start calculate:function(){ //do more stuff } //end calculate }; //en ...

javascriptjquery

What is the best way to automatically insert data into a database at regular intervals, while ensuring that users are unable to manipulate the timing through inspect

Is there a secure way to insert 1 point into the database every x seconds without allowing users to manipulate the interval time through inspect element? var time = 1; var interval = setInterval(function() { if (time != time + 1) { ...

javascriptphpjquerymysqlajax

Tips for modifying javascript code to have popups appear as bPopup instead of in a separate popup window

Is there a way to modify the following code so that popup windows open as dpopups instead of just in a new popup window ()? $(document).ready(function() { var table = $('#taulu').DataTable( { "ajax": "taulu.php", "columnDefs" ...

javascriptjqueryformattingpopupbpopup

Extract information from a JSON string stored in a variable and transform it into objects within the $scope.variable

I currently have a string variable that contains JSON data displayed below. var jsonstring = [{"latitude":"51.5263","longitude":"-0.120285","altitude":"","device":"123","rating":"5","region":"Europe","customer":"","time":"1-2 Weeks","error":"Error 1","app ...

javascriptangularjsjson

Develop a fresh behavior on-the-fly

Here is the HTML code snippet: <div class="bold knowmore login" id="j-6"> <span>...</span> </div> and this jQuery script: $(function(){ $(".login").on("click", function(){ console.log('login clicked!'); $(" ...

javascriptjquery

In development, Next.js dynamic routes function correctly, but in production they are displaying a 404 error page

I am currently working on implementing dynamic routes in my Next.js project to render pages based on user input. I have set up a route that should display the page content along with the id extracted from the URL using the useRouter() hook. Everything is f ...

javascriptreactjsnext.jsnextjs-dynamic-routing

Encountered a setback while trying to add information to a MySql database through Express

When I try to execute an insert query on a database, it throws the following error: code: 'ER_PARSE_ERROR', errno: 1064, sqlMessage: 'You have an error in your SQL syntax; check the manual that corresponds to your MySQL server versio ...

javascriptmysqlnode.jsexpress

How can you retrieve the <head> content from a remote website without being able to make any changes to that site?

Imagine I need to access the <head> tag of a remote website like YouTube. Whenever I attempt this, I encounter an error message: Access to XMLHttpRequest at ‘Website I am trying to access for the head section’ from origin ‘My Website’ has b ...

javascriptjquerygoogle-chrome-extensionxmlhttprequestcross-domain

Tips for successfully passing props to a component while utilizing the Quasar dialog plugin

As per the information provided in quasar documentation, it mentions that the custom component utilized with the dialog plugin is capable of having props. However, I am unable to figure out the method for passing these props to the component through thi ...

vue.jsquasar

What is the sequence in which Jest executes its tests?

A fascinating challenge I've taken on involves testing a card game created in JavaScript using Jest. Currently, I have developed two tests: one to verify the creation of a 52-card deck and another to confirm that the player is dealt two cards at the ...

javascriptunit-testingjestjs

"Encountered an error: AngularJS is unable to read the property 'push' as it is

I'm attempting to generate an array using data retrieved from an API. However, I continue to encounter an error message stating cannot read property 'push' of undefined in Javascript. Could someone please guide me on how to resolve this iss ...

javascriptangularjsfrontend

In the callback function within Array.prototype.map, make sure to access the newly created array

Array.prototype.map() creates a new array. How can I use this new array within the callback function passed to Array.prototype.map()? For instance: someArray.map(function(item, idx, arr) { return { theCreatedArray: xyz }; }); What should I assign to ...

javascriptarrays