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"
}
}
