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

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.

score 16 · Answer 1 · answered Jul 25 '19 at 05:47

16

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

answered Jul 25 '19 at 05:47

GollyJer

23,857
16
106
174

1

Thanks you, this was my issue. It didnt have .d.ts files. – Benjamin Scherer Jun 10 '20 at 12:46
2

https://stackoverflow.com/a/55280867/470749 seems to agree with you. I haven't gotten mine working yet. I still see `Missing file extension "ts" for "./types" import/extensions` – Ryan Sep 17 '20 at 20:25

score 5 · Answer 2 · answered Mar 30 '21 at 09:03

5

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

answered Mar 30 '21 at 09:03

UtopiaEH

79
1
4

score 2 · Answer 3 · answered Apr 27 '18 at 18:13

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

@Sankofa just move "react" line to dependencies from devDependencies and then run `npm install`. If you do not have react installed at all install it with `npm install react` — Tomasz Mularczyk, Jul 12 '18 at 05:43

score 2 · Answer 4 · answered Apr 27 '18 at 18:29

2

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.

answered Apr 27 '18 at 18:29

Jalal

3,308
4
35
43

score 2 · Answer 5 · answered May 27 '21 at 18:53

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.

score 1 · Answer 6 · answered Feb 23 '22 at 08:26

1

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

answered Feb 23 '22 at 08:26

Nikita Kumari

309
3
7

score 0 · Answer 7 · answered Feb 17 '21 at 08:20

0

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

answered Feb 17 '21 at 08:20

Yudi Krisnandi

417
1
5
12

score 0 · Answer 8 · answered Feb 09 '23 at 23:29

0

try to add in eslintrc:

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

answered Feb 09 '23 at 23:29

Paul Alexeev

172
1
11

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

8 Answers8