Background and introduction

For a very simple ReactJS project, I wanted to add ESLint capabilities :

npm install --save-dev eslint-config-react-app eslint@^8.0.0

as suggested at ReadMe for eslint-config-react-app.

My package.json after installing ESLint :

{
  "name": "reactjs-app",
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^12.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "eslint": "^8.12.0",
    "eslint-config-react-app": "7.0.0"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

In the above package.json, none of the three dependencies next, react, react-dom, depends on any ESLint package – neither directly nor indirectly.
So all the installed ESLint packages are dependencies of eslint and/or eslint-config-react-app.

My index.js :

// index.js
import { useState } from 'react';

function HomePage() {
  const [showParagraph, setShowParagraph] = useState(true);
  const showParagraphHandler = useCallback(() => {
    setShowParagraph((prevToggle) => !prevToggle);
  }, []);
  console.log('App RUNNING');
  console.log(showParagraph);
  return (
    <div className='app'>
      <h1>Hi there!</h1>
      <button onClick={showParagraphHandler}>A button</button>
    </div>
  );
}
export default HomePage;

All the files needed for the project are in a zip file available for download.
To try it out, just download, unpack and then run npm install. ¹

The observant reader may notice that the import for useCallback is missing.
Trying to run the application as above will therefore result in an error.

Running ESLint from the command line confirms the error.

npx eslint . --ext .js

results in :

  6:32  error  'useCallback' is not defined  no-undef

The question

So far so good, but autocompletion through Ctrl space wrongly suggests to import from react/cjs/react.development, or from react/cjs/react.production.min, instead of from react which would have been more correct.

Why does this happen? – Is there a bug fix?

References

• ReadMe for eslint-config-react-app
• All the project files in a zip file
• Suggested solutions for the bug in this question

CodePudding user response：

Why does this happen? – Is there a bug fix?

It seems the reason is that @types/react is a missing dependency in eslint-config-react-app so the obvious bug fix is to add @types/react manually to your project by running :

npm install @types/react

VS Code's autocompletion through Ctrl space now correctly suggests react. ¹

Installing @types/react adds "@types/react": "^18.0.0", in your package.json under "dependencies" :

{
  "name": "reactjs-app",
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "@types/react": "^18.0.0",
    "next": "^12.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "eslint": "^8.12.0",
    "eslint-config-react-app": "7.0.0"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}