CODEWITHSUNDEEP
reactjsbabeljseslinteslint-config-airbnb
Jalal
Jalal

Reputation: 3624

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

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.

Upvotes: 27

Views: 85000

Answers (9)

Igor Peterson
Igor Peterson

Reputation: 1

check your routing routes and correct them according to the documentation https://reactrouter.com/start/library/installation

Upvotes: 0

Paul Alexeev
Paul Alexeev

Reputation: 376

try to add in eslintrc:

"rules": {
   "import/no-unresolved": [2, { "devDependencies": true }],
   ...
}

Upvotes: 3

Nikita Kumari
Nikita Kumari

Reputation: 333

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

Upvotes: 0

MattSidor
MattSidor

Reputation: 2739

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.

Upvotes: 2

UtopiaEH
UtopiaEH

Reputation: 79

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

Upvotes: 5

Yudi Krisnandi
Yudi Krisnandi

Reputation: 485

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

Upvotes: 0

GollyJer
GollyJer

Reputation: 26662

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"]
    }
  }
}

Upvotes: 17

Jalal
Jalal

Reputation: 3624

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.

Upvotes: 2

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

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"
  }
}

Upvotes: 2

Related Questions