Unable to resolve path to module 'react'. (import/no-unresolved) - reactjs

Question

Seems like i am missing something here, it should work without errors but eslint keeps throwing the following:
Unable to resolve path to module 'react'. (import/no-unresolved)
Missing file extension for "react" (import/extensions)
when trying to import React from 'react'
here is some debug info:
package.json
{
"dependencies": {},
"devDependencies": {
"react": "16.3.2",
"react-dom": "16.3.2",
"#storybook/addon-actions": "^3.4.2",
"#storybook/addon-links": "^3.4.2",
"#storybook/addons": "^3.4.2",
"#storybook/react": "^3.4.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0"
}
}
.eslintrc
{
"parser": "babel-eslint",
"extends": ["airbnb", "prettier"],
"env": {
"browser": true,
"node": true,
"es6": true
}
}
.babelrc
{
"presets": ["env", "react"]
}
editor: atom v1.26.1
Thanks.

Answer 1

If you're using React Native it may help to add .native.js as an allowed extension in your .eslintrc file.
Also, if you're using Typescript then .ts and .tsx will help too.
"settings": {
"import/resolver": {
"node": {
"extensions": [".ts", ".tsx", ".native.js"]
}
}
}

Answer 2

I had some problem i removed nodo_modules directory from project and run yarn install / npm install

Answer 3

I think it complains because react should be in dependencies:
{
"dependencies": {
"react": "16.3.2",
"react-dom": "16.3.2",
},
"devDependencies": {
"#storybook/addon-actions": "^3.4.2",
"#storybook/addon-links": "^3.4.2",
"#storybook/addons": "^3.4.2",
"#storybook/react": "^3.4.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0"
}
}

Answer 4

I installed react and react-dom using npm i -E react react-dom trying to install the exact version which didn't install it correctly.
npm i react react-dom -D solved the problem.

Answer 5

This also happened to me. In my case, it was because I was running npm version 6, but a team member had installed a new library via npm version 7. Version 7 uses a new version for the lock file format.
Our solution was to make sure everyone was running the same npm version so that our package-lock.json files would be consistent.

Answer 6

Just comment out the import and run. Then again remove the comments. It worked for me.

Answer 7

try to add in eslintrc:
"rules": {
"import/no-unresolved": [2, { "devDependencies": true }],
...
}

Answer 8

I have experience with the same problem.
In my case, this error appear because I pull new update from the remote repository and it's bring new dependencies.
To solve this, I just install that dependencies with npm install