The term 'components' has not been defined (no-undef)

Recently integrated Vue into an existing project and encountered a peculiar linting error:

error: 'components' is not defined (no-undef) at src/App.vue:13:3:
  11 | 
  12 | @Component({
> 13 |   components: { HelloWorld },
     |   ^
  14 | })
  15 | export default class App extends Vue {}
  16 | </script>

This issue persists whenever I add any other attribute to the object.

Eslint Configuration

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "@typescript-eslint/explicit-member-accessibility": ["error"],
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        mocha: true,
      },
    },
  ],
};

Package.json

    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",

Typescript

Using typescript in this setup for your information.

typescriptvue.jseslint

Answer №2

After encountering an issue with TypeScript's no-undef rule, I stumbled upon a solution that worked for me. It seems to be mistaking 'components' as a variable rather than a property name. Simply replacing it with "components" fixed the problem:

@Component({
    "components": { HelloWorld },
})
export default class App extends 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

Troubleshooting problem in Grunt-TS, Grunt, watch/compile, and Dropbox integration

UPDATE: Recently, I've been experiencing some issues with another computer when it comes to watching and compiling. It seems like the tscommandxxxxxx.tmp.txt files that are generated during compilation might be causing the trouble... sometimes they ar ...

node.jsgruntjstypescriptnpm

What are some ways to leverage a promise-returning callback function?

Here is a function that I have: export const paramsFactory = (params: paramsType) => { return ... } In a different component, the same function also contains await getPageInfo({ page: 1 }) after the return .... To make this work, I need to pass a cal ...

typescriptvue.js

TypeScript error message: "The 'new' keyword cannot be used with an expression that does not have a call or construct signature."

Encountered a problem with intersection types in TypeScript... There are three type aliases: Prototype<T> - representing an object or class with a prototype property. DefaultCtor<T> - representing an object or class with a default construct ...

typescript

Can a type alias be created for more than one parameter of a class or function with multiple type parameters?

When using Vue, there are situations where a generic function may require 3, 4, or even 5 type parameters. Is it possible to create a type alias for these parameters in order to avoid typing them out repeatedly? Something like this perhaps: // Example of ...

typescriptvue.jstypescript-generics

How to apply a single pipe to filter columns in Angular 2 with an array of values

I need to sort through an array of objects using multiple array string values. Here is an example of how my array of objects looks like: [{ "name": "FULLY MAINTAINED MARUTI SUZUKI SWIFT VDI 2008", "model": "Swift" }, { "name": "maruti suzuki ...

angulartypescript

Learn the technique in Vue to separate a string using commas and store the values in an array

As a Ruby enthusiast, I am delving into the world of Vue. In my project, users can input multiple styleCodes separated by commas. I aim to store these styleCodes in an array for flexible length calculations. See my code snippet below: <template> &l ...

javascriptvue.js

What is the process for ensuring that the "ng-multiselect-dropdown" is a mandatory field within Angular 7?

Is there a way to require the ng-multiselect-dropdown field to have at least one selected item? <ng-multiselect-dropdown [placeholder]="'Select countries'" [data]="countries" [(ngModel)]="countriesSelectedItems" [settings]="co ...

cssangulartypescriptdrop-down-menuangular7

When using Vue.js, it is not possible to quote variables in HTML element attributes

Below is the provided code snippet: <tr v-for="(item, index) in detail" :key="item.name" class="[[ item.name ]]"> <td>[[ index + 1 ]]</td> <td>[[ item.name ]]</td> The resulting HTML output i ...

vue.js

Setting up the TypeScript compiler locally in the package.json file

UPDATE #1: It appears that I have managed to come up with a functional configuration, but I am open to any suggestions for improvement. Feel free to check out the answer here: THE ORIGINAL INQUIRY: I am in the process of setting up my environment so that ...

node.jstypescriptnpmvisual-studio-codetsconfig

What is the technique used to initialize the $route object?

Upon attempting to access this.$route in the created() hook, I noticed that it consistently returns an empty object when logged to the console. {path: '/', name: undefined, params: {…}, query: {…}, hash: '', …} fullPath: "/&q ...

javascriptvue.jsvue-router

The deep linking feature may fail to function properly when using a redirect URL

Hello there! So I've been using Capacitor with VueJS and everything is running smoothly, except for one small hiccup. My deep link functions perfectly fine, but it seems to hit a roadblock when it's a redirect URL. My goal is to integrate oauth2 ...

vue.jsdeep-linkingcapacitor

Exploring project references in TypeScript 3 with distinct `outDir` configurations

I am eager to utilize the project references functionality in TypeScript 3.1. Initially, my project's directory structure post-compilation appears as follows: . ├── A │ ├── a.ts │ ├── dist │ │ ├── A │ │ ...

typescript

Ensure the proper sequence of field initialization within a TypeScript class constructor

Is there a way to ensure the proper initialization order of class fields in TypeScript (4.0) constructors? In this example (run), this.x is accessed in the method initY before it's initialized in the constructor: class A { readonly x: number rea ...

typescript

Compilation of Angular 6 project is failing due to error TS1005: Expected ',' instead of the symbol used

I keep encountering an error message whenever I try to compile my code. ERROR in src/app/form/form.component.ts(22,39): error TS1005: ',' expected. Below is the snippet of code where the error is pointing: import { Component, OnInit } from &ap ...

javascriptangulartypescript

Trying to access the label attribute of a select option in Vue.js?

Looking to retrieve the name attribute of a selected option in Vuejs. After experimenting with the value attribute, I found that it worked successfully. Below is the code I used: Tested code: <select id="countryselect" name="country" @change="onChange ...

javascriptvue.js

How do you structure `en.js` or `ja.js` files for lazy loading in vue-i18n?

What is the correct format for lazy loading en.js or ja.js? The code below is not working: // en.js export default { title: 'Title', greeting: 'How are you' }; and import Vue from 'vue'; import Inven ...

javascriptjsonvue.jsvue-i18n

Finding parameters in Angular 4

I am working on implementing a multilanguage feature in an Angular app and I need to establish the default language when the site loads. The two languages supported are Spanish and English, with Spanish being the default language. In order to achieve this, ...

angulartypescriptangular-routing

Using Vue CLI, incorporating sass modules can be made easier by adding include paths. Learn how to utilize include paths for

Embarking on a new project with Vue CLI for the first time. Opting for the Spectre CSS framework, installed via NPM. Trying to streamline imports by utilizing the includePaths option for a more efficient process. In essence, looking to reduce complexity ...

vue.jswebpackvuejs2vue-clisass-loader

Vue 3 app encountering error due to element having an 'any' type implicitly

I want to incorporate lucidev icons into my component, but I am fairly new to typescript. You can find the lucidev icons here: https://github.com/lucide-icons/lucide <template> <component :is="icon" /> </template> <script ...

typescriptvue.jsvuejs2vue-componentvuejs3

Getting data ready for a form display (django, drf, axios, vuejs)

I am currently developing a web application using Django, DRF, Axios, and Vue.js. The application functions properly, but I am seeking advice on the best practices for managing this scenario. Take a look at the form below: The task at hand is to create an ...

djangovue.jsrestdjango-rest-framework