`import/named` linting issue with several React imports

Hello there,

Over the weekend, some linting issues started to appear and I can’t find a way to make the errors disappear. (we’re using @types/react ^17.0.0)

import { FC, ReactNode } from 'react';

and then, using eslint:

 1:10  error  FC not found in 'react'         import/named
 1:14  error  ReactNode not found in 'react'  import/named

Here’s our config:

    "eslint": "7.18.0",
    "eslint-config-algolia": "16.0.0",
    "eslint-config-prettier": "7.2.0",
    "eslint-plugin-eslint-comments": "3.2.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-prettier": "3.3.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",

Any clue? Lmk if you need more information

Issue Analytics

State:
Created 2 years ago
Reactions:7
Comments:9 (4 by maintainers)

Top GitHub Comments

3reactions

ljharbcommented, Sep 9, 2021

Those are types. Use import type for them. Also make sure you’re using the TS resolver, because actual react doesn’t have those exports.

1reaction

melenudocommented, Sep 21, 2021

@TRMW, the global component types are working for me. I’m fixing an existing private project and I can’t share it. Basically is using the config you show:

module.exports = {
  extends: [
    './rules/typescript',
    './rules/imports',
    './rules/stencil',
    './rules/jsx-a11y.js',
    './rules/prettier',
  ].map(require.resolve),
  rules: {},
  env: {
    es6: true,
    node: true,
    jest: true,
    browser: true,
  },
  settings: {
    'import/resolver': {
      'typescript': {},
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

./rules/imports

module.exports = {
  plugins: ['import'],
  extends: ['plugin:import/typescript'],
  rules: {
    'import/no-unresolved': 'error',
    'import/named': 'error',
    'import/namespace': 'error',
    'import/default': 'error',
    'import/export': 'error',
    'import/no-named-as-default': 'warn',
    'import/no-named-as-default-member': 'warn',
    'import/no-duplicates': 'warn',
  },
};

./rules/typescript

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    ...
  },
};

Top Results From Across the Web

ESLint does not find React Native components #28549 - GitHub

I'm getting these ESLint errors in all of my js files, which import React Native components. Imports from all other libraries work just...

ESLint does not find React Native components - Stack Overflow

This interferes with the linter's ability to statically resolve imports. Workaround. You can work around this issue by ignoring the entire react ......

eslint-plugin-import - npm

This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import ...

Importing and Exporting Components - React Docs

How to import and export a component; When and how to use default and named imports and exports; How to export multiple components...

no-restricted-imports - ESLint - Pluggable JavaScript Linter

Imports are an ES6/ES2015 standard for making the functionality of other ... "importNames": ["Bar"], "message": "Please use Bar from /import-bar/baz/ ...