ESLint No default export found in imported module "react"

Question

Problem

import React, { useContext, useEffect, useRef } from 'react';

I turn on esModuleInterop and allowSyntheticDefaultImports in tsconfig.json.
And I also use eslint-import-plugin and eslint-import-resolver-typescript for linting about import.

But, eslint says "No default export found in imported module "react"."

How to fix this?

Background

Tech Stack

• react: 18.2.0
• @types/react: 18.0.14
• typescript: 4.7.4
• eslint: 8.18
• @typescript-eslint/eslint-plugin: 5.30
• @typescript-eslint/parser: 5.30.5
• eslint-import-resolver-typescript: 3.1.1
• eslint-plugin-import: 2.26
• eslint-plugin-react: 7.30 ...

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@styles/*": ["styles/*"],
      "@custom-types/*": ["custom-types/*"],
      "@pages/*": ["pages/*"],
      "@assets/*": ["assets/*"],
      "@constants": ["constants.ts"],
      "@api/*": ["api/*"],
      "@context/*": ["context/*"]
    },
    "typeRoots": ["src/custom-types"]
  },
  "include": ["src"]
}

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2022": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "typescript": {
        "project": "frontend/tsconfig.json"
      }
    }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "extends": [
    "plugin:jsx-a11y/recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:storybook/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never",
        "js": "never",
        "jsx": "never"
      }
    ],
    "react/prop-types": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-interface": "off"
  }
}

Answer 1

// tsconfig.json "allowSyntheticDefaultImports": true

Answer 2

The * fixed my problem.

import * as React from 'react';