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

[nicolas-goudry]

First of all: thanks for this awesome project, I use it in all of my projects and it’s a breeze!

I have a Vite project using the react-ts template. I setup xo and 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"]
}

Here is a repository reproducing the issue: https://github.com/nicolas-goudry/xo-ts-vite-no-unsafe

[fregante]

I don’t think this is related to XO. It should be opened on typescript-eslint’s repo