Encountering issues with upgrading Vue.js 2.5.2 with TypeScript

I am currently in the process of updating vue js to version 2.5.2 along with typescript 2.5.3.

Below is my index.ts file:

import Vue from 'vue'

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

This is my tsconfig.json configuration:

{
  "compilerOptions": {
    "outDir": "./wwwroot/build/",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "types": [
      "vue-typescript-import-dts"
    ],
    "experimentalDecorators": true
  },
  "include": [
    "Features/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

However, I encountered the following error message:

ERROR in C:\dev\proj\src\Proj.Web\node_modules\vue-typescript-import-dts\index.d.ts (3,36): error TS2304: Cannot find name 'Vue'.

My setup was functioning properly with vue js 2.4.

I made a change by removing the "allowSyntheticDefaultImports": true, based on this article

Previously, we already recommend using ES-style imports (import Vue from ‘vue’) everywhere with “allowSyntheticDefaultImports”: true in tsconfig.json. The new typings will officially move to ES-style import/export syntax, so that config is no longer necessary, and users are required to use ES-style imports in all cases.

If anyone could point out what I might be overlooking, I would greatly appreciate it.

typescriptvue.jsvuejs2

Answer №1

I decided to create a brand new directory in my VSCode workspace and I made some interesting observations.

Upon exploring the Vue package on NPM, I realized that it already includes type information. This means you do not have to go searching for extra types for Vue (i.e. you should not download @types/vue from NPM).

"dependencies": {
    "vue": "^2.5.2"
}

Surprisingly, even without including this section:

"types": [
  "vue-typescript-import-dts"
],

I was able to successfully compile everything using your provided code sample.

Here are all the juicy details...

package.json

{
    "name": "sample-vue",
    "private": true,
    "dependencies": {
        "vue": "^2.5.2"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./wwwroot/build/",
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es5",
            "es2015.promise"
        ],
        "experimentalDecorators": true
    },
    "include": [
        "*.ts"
    ],
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

app.ts

import Vue from 'vue'

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

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

Can you explain the purpose of the child-flex option within a v-flex component in Vuetify?

Reviewing the Vuetify online documentation regarding Grid Systems and Unique Layouts, it was noted that the v-flex tag used for the Orange block includes a child-flex parameter. <v-flex d-flex xs12 sm2 child-flex> <v-card color="orange l ...

vue.jsvuetify.js

Guidelines for launching a Vue.js application in a production environment using the package-lock.json file

Looking to create a vue.js app for production using npm ci. Should the @vue/cli-service be placed in the devDependencies section of package.json before running npm ci vue-cli-service --mode production Or should the @vue/cli-service be added to the depende ...

vue.jsnpm

Getting started with TinyMCE in Nuxt: A step-by-step guide

I need to incorporate this script into my Nuxt code: <script> tinymce.init({ selector: "#mytextarea", plugins: "emoticons", toolbar: "emoticons", toolbar_location: "bottom", menubar: false ...

javascriptvue.jstinymcenuxt.jsscript-tag

Is it feasible to define a custom Type in Typescript that accurately represents a Treeview structure?

Typescript is a TYPED superset of JavaScript that compiles into JavaScript, fine! It helps us to reduce some typos etc. I want to create an interface that will serve as an argument in a method. This interface needs to represent a treeview for parsing an ob ...

typescript

Error Encountered during Compilation of React TypesIs this okay

Currently, I am working on an MVC project that involves the use of TypeScript. To access the types required for this project, I have also integrated React. To obtain the React types, I performed an npm install --save-dev @types/react (similarly for react-d ...

reactjstypescriptnpmnpm-install

Assigning to a constrained type with an indexable signature results in failure

When using typescript 4.7.2, I encountered an issue where the following code fails only when assigning a value: type IndexableByString = { [k: string]: any }; function test<T extends IndexableByString>(target: T, key: string) { var prop = target ...

typescript

Utilizing Axios for Vue Multiselect on select/enter Event

I have successfully implemented a Vue Multiselect feature that retrieves options from my database using an axios call. This functionality works great as it allows users to select existing options or add new ones to create tags. While this setup is working ...

javascriptvue.jsaxiosmulti-select

Leveraging a single Vuex module store across various sibling components

In my application, I am working with one global state that contains several modules. Currently, I have Vue components set up for different sections of my page. Everything is properly configured so that /foo utilizes the foo store (which is functioning co ...

vue.jsvue-componentvuexvuex-modules

What is the process for importing something from index.js within the same directory?

My folder structure is similar to the one below /components/organisms -- ModuleA.vue -- ModuleB.vue -- index.js The content of index.js: export { default as ModuleA } from "./ModuleA.vue" export { default as ModuleB } from "./ModuleB.vue&qu ...

javascriptnode.jsvue.jsecmascript-6

Tailored production method based on specific criteria

One of my challenges is to create a versatile factory method using typescript. The main objective is to initialize a class based on its name using generics, instead of employing if/else or switch statements. I am aiming for similar functionality as this ...

typescript

What are the benefits of utilizing TypeScript declarations? How can you demonstrate their value with concrete examples?

I'm a bit confused about the use of declaration in TypeScript. It seems like the compiler doesn't compile it into the js file, so what is the purpose and advantage of using declaration? Can someone please explain this to me? ...

typescript

Best practices for annotating component props that can receive either a Component or a string representing an HTML tag

What is the correct way to annotate component props that can accept either a Component or a string representing an HTML tag? For instance, imagine I have a component that can receive a custom Component (which includes HTML tags like div, p, etc.). The cod ...

reactjstypescript

When running the test, a "is not defined" ReferenceError occurs in the declared namespace (.d.ts) in ts-jest

When running typescript with ts-jest, the application functions properly in the browser but encounters a ReferenceError: R is not defined error during testing. The directory structure: |--app | |--job.ts |--api | |--R.d.ts |--tests | |--job.test.ts ...

typescriptjestjsts-jest

Creating a TypeScript interface for Immutable.js objects: A step-by-step guide

Imagine we are working with the following interface User: interface User { id: number; name: string; bag: Item[]; } Now, let's create a React component: interface UserComponentProps { user: User; } interface UserComponentState {} class Use ...

reactjstypescriptimmutable.jstypechecking

Mapped Generics in Typescript allows you to manipulate and

Currently, I am attempting to utilize TypeScript generics in order to transform them into a new object structure. Essentially, my goal is to change: { key: { handler: () => string }, key2: { hander: () => number }, } to: ...

typescripttypescript-generics

Bind Vue.js 2 component's data property to the very first instance of the component or to a single instance only

Seeking assistance. I am relatively new to Vue.js and require some guidance. Scenario: I have a component with BS modal inside, which is rendered in a loop and has multiple instances. Problem: The first rendered component receives its data from the p ...

vue.jsvuejs2frontendvue-componentv-model

Having trouble with the Vuejs validation code not functioning correctly?

I need help with a JavaScript function that posts objects to the backend only if all items are numbers. Here is the code snippet I'm working with: var MyApp = new Vue({ el: '#my_element', data: { errors: [], ...

javascriptjqueryvue.jsvuejs2

Having trouble linking tables to Node.js with TypeScriptyntax?

I am facing an issue with mapping multiple entities using sequelize. I keep encountering the error message " Error: Profesor.hasOne called with something that's not a subclass of Sequelize.Model". How can I resolve this issue? Below is the code for t ...

node.jstypescriptsequelize.js

Integrate a fresh global JSX attribute into your React project without the need for @types in node_modules

It is crucial not to mention anything in tsconfig.json. Error Type '{ test: string; }' cannot be assigned to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'test' does not exi ...

reactjstypescript

Step-by-step guide on integrating StyleX into your fresh React project

As I delve into my new project, incorporating StyleX has proven to be a bit challenging especially when working with NextJS. I find myself grappling with configuring the "next.config.js" file without causing conflicts with the existing "babel.config.js" f ...

reactjstypescriptnext.jscss-in-js