Encountering a non-constructor issue in Vue, while working with Typescript and webpack

I'm currently using Typescript along with Webpack. Below is my code snippet. When I run it in Chrome, I encounter the following error:

Uncaught TypeError: vue_1.default is not a constructor
    at Object.defineProperty.value (Index.ts:3)
    at __webpack_require__ (bootstrap f29fbbb047d131556dcf:19)
    at Object.defineProperty.value (bootstrap f29fbbb047d131556dcf:62)
    at bootstrap f29fbbb047d131556dcf:62

I have imported the package and added the resolve -> alias -> vue section as well. Despite trying various solutions and experimenting with the tsconfig file, nothing seems to work. Any suggestions on how to resolve this issue?

Below are the contents of webpack.config.js:

Here goes your webpack configuration...

And here's tsconfig.js:


{
  "compilerOptions": {
    // Compiler options here
  },
  "exclude": [
    "node_modules"
  ]
}

The index.ts file looks like this:

import Vue from "vue"

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    }
})
console.log(app)

In addition, an excerpt of the HTML code used:

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

Answer №1

If you are working with the vue/dist/vue.js file, keep in mind that it does not have a default export. However, Vue offers an ES module version called vue/dist/vue.esm.js. It is recommended to use this version when using it as an ES module and importing it with the import statement.

To set your alias correctly, add the following code snippet:

alias: {
    'vue': 'vue/dist/vue.esm.js'
},

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

When I try to ng build my Angular 11 application, why are the type definitions for 'Iterable', 'Set', 'Map', and other types missing?

As someone new to Angular and the node ecosystem, I'm facing a challenge that may be due to a simple oversight. The issue at hand: In my Angular 11 project within Visual Studio 2019, configured with Typescript 4, attempting to run the project throug ...

Unlocking the power of bitwise operations in VueJS with Javascript

Forgive me if this sounds like a silly question. I'm currently using vue-moment within my Vue.js application and I have the following code snippet: <!-- date = '2020-03-23 01:01:01' --> <span>{{ date | moment('from', & ...

Tips for navigating to a specific row within a designated page using the Angular Material table

Utilizing angular material, I have set up a table with pagination for displaying data. When a user clicks on a row, they are redirected to another page. To return to the table page, they must click on a button. The issue arises when the user needs to retu ...

Achieving synchronization in typescript with Angular 5

Below is the code I am working with: public async getOrderInforAsync(customerOrderId) { return new Promise((resolve, reject) => { this.orderEntryService.getCommissionIncentives(customerOrderId) .subscribe( response => { ...

Passing props conditionally in VuePassing props in Vue components

Is there a more elegant way to conditionally pass one or more props down to a child component? If the id is sometimes set, I want to pass it down. Setting id to null isn't an option since props require a value. In the past, I've used a "v-if" li ...

Unspecified checkbox selection with Vue.js

Recently delving into the world of Vue, I've been grappling with how to display a nested list visually. In this list, each item should feature a triple-state checkbox system: When a child item is checked, the parent item's checkbox should becom ...

Improving redundant code in Angular TypeScript

I'm facing a challenge with refactoring duplicated code in my project and I'm not sure where to start. There are two methods in my code that essentially perform the same task by calling the same service (due to pagination requirements), but this ...

Having trouble with implementing a custom validation service in Angular?

I am trying to create a CustomValidationService with a method that validates whether the userName is already in use. However, I encountered an error when attempting to add the userService, which resulted in the following message << Cannot read proper ...

Exploring Object Iteration in Tabs with VueJS

I need assistance with iterating through an object instead of an array in my tabs. How can I achieve this? Here is the code snippet: <v-tabs v-model="tab" background-color="transparent" color="basil" grow> <v-tab ...

How can I retrieve the "column" id in Draggable Vue?

Currently, I am experimenting with the draggable feature to create a kanban board with four columns. To start off, I decided to build two columns using vue-draggable. However, I am facing difficulty in accessing the specific column of a task. Here is my i ...

What setting should I adjust in order to modify the color in question?

Looking to Customize Radar Chart Highlighted Line Colors https://i.sstatic.net/PqWc4.png I am currently working on a Radar Chart and I am trying to figure out which property needs to be edited in order to change the color of the highlighted lines. I have ...

How to transform a sentence string into an array of individual words using Ionic 2

I need to convert a string of words separated by new lines into an array called "words." aa aaa aaaa aaaaa In Java, I would do it like this: String s = "This is a sample sentence."; String[] words = s.split("\\s+"); for (int i = 0; i < word ...

Manipulating all components of a specific type in App.vue with VueJS: Is it possible?

Consider this template with FruitPrices as a component: <template> <div id="app"> <div> <span @click=SOME_FUNCTION> Change currency </span> <FruitPrices fruit="apple"></FruitPrice ...

"Integrating Orgchart with Typescript in Angular4: A Step-by-Step

mxResources.loadDefaultBundle = false; var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) || mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage); // Ensures synchronous requests are handled properly ...

Having trouble getting Edge browser to identify embedded blob as a valid source URL within a video tag

Having trouble using a blob as the source for a video file. Works well on Chrome and Safari, but facing issues on Edge. This code is written in TypeScript with Angular 7. On Edge mobile, it seems like a broken link is displayed. private initVideoFromBlo ...

The TypeScript compiler does not allow a 'number' type to be assigned to 0, 10, or 20, even when the number itself is 0

When testing out my code snippet on the playground for Typescript, an error appears on line 24. I discovered that the issue can be resolved by explicitly casting commands back to <IPlan[]>, but I wonder why this extra step is necessary. Property &a ...

Error in Vue: Expected object but received a function instead of a valid value

I am attempting to apply a computed function to my style. However, the computed function uses a property within it and Vue is throwing an error stating that it expects an object but is receiving a function. Below is the code in question. <template> ...

Error encountered during sequelize synchronization: SQL syntax issue detected near the specified number

Four Sequelize Models were created using sequelize.define();. Each model is similar but with different table names. To avoid manual creation of tables in MySQL cli, the decision was made to use sequelize.sync() in the main index.js file to allow Sequelize ...

Using Vue.js causes an issue with Array.from(Object).forEach

When using vue.js 2 CLI, I typically define object data like this within the data() function: data(){ return{ user: { user_mail: '', user_password: '', user_confirm_password : '' ...

When webpack is executed, everything runs smoothly; however, WebStorm raises an

An untouched fork of the Angular 2 webpack boilerplate on Github called Angular 2 webpack boilerplate is causing WebStorm to report an error. The error message pertains to the App in the line import {App} from './components/index'; found in the f ...