Bad autocomplete in eslint-config-react-app: 'react/cjs/react.development' - node.js

Question

Background
For a very simple ReactJS project, I wanted to
add ESLint capabilities :
npm install --save-dev eslint-config-react-app eslint#^8.0.0
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 installed ESLint packages are dependencies of
eslint-config-react-app.
All the files needed for the project are in a zip file
available for download.
To try it out, just download, unpack and run npm install.
1
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;
The question
An observant reader will notice that the import for useCallback is
missing.
But autocompletion (in VS Code 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?
^ click to enlarge
References
README for eslint-config-react-app
All the project files in a zip file
Suggested solutions for the bug in this question
1
For me, the npm install command took about 5 minutes to complete.
The npm install command downloads and installs all packages in
package.json – including indirect packages.
Running npm run dev from the command line should start the
application in your default web browser.

Answer 1

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 --save-dev
VS Code's autocompletion through Ctrl + space
now correctly suggests react.
1
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"
]
}
}
1
If it doesn't work, try restarting VS Code.