

`yarn create vite` で React かつ TypeScript + RSC なプロジェクトを作った後、README.md にしたがって
ESLint の設定を増やしたところ、`yarn lint` で以下のエラーが消せませんでした。

[code]

    /path/to/my-project/vite.config.ts
      0:1  error  This rule requires the `strictNullChecks` compiler option to be turned on to function correctly  @typescript-eslint/prefer-nullish-coalescing
      0:1  error  This rule requires the `strictNullChecks` compiler option to be turned on to function correctly  @typescript-eslint/no-unnecessary-condition
    
[/code]

エラーメッセージには `strictNullChecks` を有効にせよと書かれているのですが、tsconfig.json を見ると `strict:
true` になっています。なぜこのエラーが出るのでしょうか。

以下詳細な環境情報です。

## package.json

[code]

    {
      "name": "my-project",
      "private": true,
      "version": "0.0.0",
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview"
      },
      "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
      },
      "devDependencies": {
        "@types/react": "^18.2.15",
        "@types/react-dom": "^18.2.7",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "@vitejs/plugin-react-swc": "^3.3.2",
        "eslint": "^8.45.0",
        "eslint-plugin-react": "^7.33.2",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.4.3",
        "typescript": "^5.0.2",
        "vite": "^4.4.5"
      },
      "volta": {
        "node": "18.17.1",
        "yarn": "1.22.19"
      },
      "packageManager": "yarn@3.6.3"
    }
    
[/code]

## tsconfig.json

[code]

    {
      "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "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"],
      "references": [{ "path": "./tsconfig.node.json" }]
    }
    
[/code]

## .eslintrc.cjs

[code]

    module.exports = {
      root: true,
      env: { browser: true, es2020: true },
      parserOptions: {
        ecmaVersion: '2020',
        sourceType: 'module',
        project: ['./tsconfig.json', './tsconfig.node.json'],
        tsconfigRootDir: __dirname,
      },
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/strict-type-checked',
        'plugin:@typescript-eslint/stylistic-type-checked',
        'plugin:react/recommended',
        'plugin:react/jsx-runtime',
        'plugin:react-hooks/recommended',
      ],
      ignorePatterns: ['dist', '.eslintrc.cjs'],
      parser: '@typescript-eslint/parser',
      plugins: ['react-refresh'],
      rules: {
        'react-refresh/only-export-components': [
          'warn',
          { allowConstantExport: true },
        ],
      },
      settings: {
        react: {
          version: 'detect',
        },
      },
    }
    
[/code]


CC BY-SA 4.0
2023-09-03T10:03:32.130
96113
2023-09-03T10:20:37.943
19110
question
typescript vite eslint
ESLint が vite.config.ts に対し strictNullChecks が有効化されていないというエラーを出す


自己回答です。tsconfig.node.json で `strict: true` になっていませんでした。設定を追加したところ解決しました。

Vite 4.4 では、<https://stackoverflow.com/q/72027949/5989200> で解説されているように
tsconfig.json と tsconfig.node.json のふたつの設定が存在します。このうち vite.config.ts
の設定として使われるのは tsconfig.node.json であるため、こちらに `strictNullChecks: true`
が必要です。`strict: true` は `strictNullChecks: true` を含意するので `strict: true`
でも大丈夫です。

↓修正前の tsconfig.node.json

[code]

    {
      "compilerOptions": {
        "composite": true,
        "skipLibCheck": true,
        "module": "ESNext",
        "moduleResolution": "bundler",
        "allowSyntheticDefaultImports": true
      },
      "include": ["vite.config.ts"]
    }
    
[/code]

// VS Code で編集している場合で、tsconfig.node.json を編集してもエディタ上の ESLint の警告が消えない場合は、VS
Code を再起動して ESLint Server を再起動させると良いです。


CC BY-SA 4.0
2023-09-03T10:03:32.130
96114
2023-09-03T10:20:37.943
2023-09-03T10:20:37.943
19110
19110
96113
answer