Error with 'no-unsafe-*' rules in Vite project

[nicolas-goudry]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have searched for related issues and found none that matched my issue.
• I have read the FAQ and my problem is not listed.

Issue Description

I have a Vite project using the react-ts template. I setup xo as my linter, which uses this project under the hood.

I reported this issue on the xo project, but it got closed, asking me to open an issue in typescript-eslint instead.

I’m having an issue with @typescript-eslint/no-unsafe-* rules on the following code:

plugin.ts

export type BuildInfoFromRoot = {
  git: {
    branch: string
    commitId: string
    shortCommitId: string
    commitTime: string | number
  }
  build: {
    name: string
    version: string
    time: string | number
  }
}

src/app.tsx

import type {BuildInfoFromRoot} from '../plugin'

const response = await fetch('/some-url')
// This is not OK for typescript-eslint
const data: BuildInfoFromRoot = await response.json()

function App() {
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

export default App

However, if I declare the type locally, it works:

type BuildInfoFromLocal = {
  git: {
    branch: string
    commitId: string
    shortCommitId: string
    commitTime: string | number
  }
  build: {
    name: string
    version: string
    time: string | number
  }
}

const response = await fetch('/some-url')
const data = (await response.json()) as unknown as BuildInfoFromLocal

And it’s also OK if I import the type from another file under the src directory:

import type {BuildInfoFromSrc} from './main'

const response = await fetch('/some-url')
const data = (await response.json()) as unknown as BuildInfoFromSrc

---

I’m using the following configuration:

{
  "extends": ["xo-react"],
  "envs": ["browser", "es2022"],
  "space": 2,
  "semicolon": false,
  "prettier": true,
  "rules": {
    "import/extensions": "off",
    "import/order": [
      "error",
      {
        "alphabetize": { "order": "asc", "orderImportKind": "asc", "caseInsensitive": true }
      }
    ],
    "n/file-extension-in-import": "off",
    "no-console": "error",
    "react/boolean-prop-naming": [
      "error",
      {
        "rule": "^(is|has|should|can)[A-Z]([A-Za-z0-9]?)+",
        "validateNested": true
      }
    ],
    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
    "react/react-in-jsx-scope": "off"
  },
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "rules": {
        "@typescript-eslint/naming-convention": [
          "error",
          {
            "selector": "variableLike",
            "format": ["strictCamelCase", "UPPER_CASE", "PascalCase"],
            "leadingUnderscore": "allow"
          }
        ]
      }
    }
  ]
}

Here are my two TS config files:

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["*.ts"]
}

Reproduction Repository Link

https://github.com/nicolas-goudry/xo-ts-vite-no-unsafe

Repro Steps

1. clone the repo
2. npm install
3. npm run lint

Versions

package	version
@typescript-eslint/eslint-plugin	6.3.0
@typescript-eslint/parser	6.3.0
TypeScript	5.1.6
ESLint	8.47.0
node	18.16.0

[bradzacher]

This is working as expected because .json() returns Promise<any>
https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts#L3134-L3135
playground

Assigning const variable: T = any is an error in the rule as you are assigning any to a typed variable.
If you want to remove the any and satisfy the rule, use as T to assert the type, or use a library to refine from any.