Search code examples
node.jsnpmeslintcreate-react-app

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

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?

'react/cjs/react.development' is suggested, not 'react'.

^ click to enlarge

References

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.
Solution

  • 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

    VS Code's autocompletion 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"
    ]
  }
}

    1 If it doesn't work, try restarting VS Code.