Component error with types from *.d.ts files.

[RollingTL]

I created new Vue project and added src/app.d.ts:

interface Test {
  a: number;
  b: number;
}

In App.vue I tried to use it:

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";

const k: Test = {
  a: 1,
  b: 2,
};

console.log(k);
</script>

And have error:
'Test' is not defined. eslint

Please help to solve this. It is very frustrating to start fresh project and to have problem with very simple task.

Repo:demo

[LinusBorg]

The error is coming from Eslint, the linter. Not Typescript.

So you would need to tell Eslint about a global named Test:

// .eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  globals: {
    Test: 'readonly'
  }
}

[RollingTL]

I don't like the idea of duplicating every type in d.ts and in eslint.rc.

The problem is that VUeJS 'npm init vue@latest' installation is installing configuration which lacks certain configurations or packages.

Current solution for my above question is to add to eslint config

  rules: {
    "no-undef": "off"
  }

But it looks hacky because I have defined types and I should not add rules to eslint config.

The problem is that current default installation is supposed to have all configured and now it needs additional configuration.

And there is another problem:
Could not find a declaration file for module '@rushstack/eslint-patch/modern-module-resolution'. '/Users/admin/www/aaa/node_modules/@rushstack/eslint-patch/modern-module-resolution.js' implicitly has an 'any' type.

When I do fresh install of VueJS I expect everything is configured properly. Now it is not.

[LinusBorg]

The problem is that current default installation is supposed to have all configured and now it needs additional configuration.

I can agree that we could consider disabling this rule for new projects generated with TS as Typescript-eslint docs recommend not to use them in Typescript projects. Other than that though, it works like it should, no?

Edit: Created a PR: vuejs/eslint-config-typescript#51

And there is another problem:
Could not find a declaration file for module '@rushstack/eslint-patch/modern-module-resolution'. '/Users/admin/www/aaa/node_modules/@rushstack/eslint-patch/modern-module-resolution.js' implicitly has an 'any' type.

Where do you get this error? in your IDE? Terminal? The eslint config is a JS file so "missing types" should not be something being reported - it's not in Typescript, anyway. So it would be weird for TS to complain about that.

I certainly don't get such an error anywhere in a brand new project.

[RollingTL]

This error is in the second line of .eslintrc.cjs of fresh installed VueJS:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module "/Users/admin/www/aaa/node_modules/@rushstack/eslint-patch/modern-module-resolution"

Could not find a declaration file for module '@rushstack/eslint-patch/modern-module-resolution'. '/Users/admin/www/aaa/node_modules/@rushstack/eslint-patch/modern-module-resolution.js' implicitly has an 'any' type.

If the '@rushstack/eslint-patch' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module '@rushstack/eslint-patch/modern-module-resolution';`ts(7016)

The error happens in VSCode. And PHPStorm doesn't show this error.

Then we have strange situation with freshly installed VueJS project. It is written without semicolons. But there is no appropriate rule in prettier config. Each component warns that there is no ';'

PHPStorm shows 17 errors/problems in freshly installed Vue project.
Almost in each component this two errors:

TS1232: An import declaration can only be used at the top level of a namespace or module.
TS2307: Cannot find module '*.vue' or its corresponding type declarations.

[LinusBorg]

This error is in the second line of .eslintrc.cjs of fresh installed VueJS:

I just created a fresh project and don't get an error. again, I don't see why TS should check the JS file and complain about missing types. It does not do that for me. Seems to be a setting with your VSCode.

Then we have strange situation with freshly installed VueJS project. It is written without semicolons. But there is no appropriate rule in prettier config. Each component warns that there is no ';'

Indeed. Guess I never noticed because I always copy my own settings into any new projects right away. Will talk with soda about this.

For now, do one simple npm run lint to fix all of these initially.

PHPStorm shows 17 errors/problems in freshly installed Vue project.

That may have to be address with PHPStorm, or answered by someone using PHPStorm. Jetbrains IDEs usually have great support for Vue from what I heard from users. I can't help with that as I never used their Products, though.

[RollingTL]

Thank you. Hope VueJS DX will get better and better.

[LinusBorg]

Concerning Prettier defaults I just created a PR here: vuejs/create-eslint-config#4