[no-undef] undefined namespace after upgrading from 3.10.1 to 4.x.x

[illmat]

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have read the FAQ and my problem is not listed.

Repro

reproduction repo: https://github.com/illmat/undefined-namespace-issue

{
  "rules": {
    "@typescript-eslint/no-undef": "error"
  },
  "parserOptions": {
    ecmaVersion: 2020
  }
}

<template>
  <div id="app">
    <h1>Demo</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  foo: stripe.Token | null = null;
}
</script>

<style>
</style>

tsconfig: https://github.com/illmat/undefined-namespace-issue/blob/master/tsconfig.json

Expected Result
The namespace "stripe" should be defined

Actual Result

/home/illmat/src/vue/vue-typescript-namespace/src/App.vue
  12:8  error  'stripe' is not defined  no-undef

Additional Info
The namespace should be provided by the package: @types/stripe-v3.
It works fine in main.ts with current version 4.1.0

Works fine in App.vue when using version 3.10.1 or lower.

Versions

package	version
@typescript-eslint/parser	4.1.0
TypeScript	4.0.2
ESLint	7.8.1
node	12.18.0

[bradzacher]

This is working as expected.

If you have global types, you need to declare them, just like if you have global variables, you need to define them.

https://eslint.org/docs/rules/no-undef#rule-details-202

https://eslint.org/docs/user-guide/configuring#specifying-globals

In general I recommend not using no-undef for typescript code, because it duplicates what typescript does, and it does it worse.