Can't resolve module (not found) in React.js

Question

I can't believe that I'm asking an obvious question, but I still get the error in console log.

Console says that it can't find the module in the directory, but I've checked at least 10 times for typos. Anyways, here's the component code.

I want to render Header in root

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

This is the Header component

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

I've checked at least 10 times that the module is at this location ./src/components/header/header, and it is (folder "header" contains "header.js").

Yet, React still throws this error:

Failed to compile

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npm test says the same thing.

It seems you need `import Header from './components/header/header'` w/o src. File path is relative to importing file path. Then you need to export `Header` from `header.js` and fix `App.render` method. — Yury Tarabanko, Jun 08 '17 at 15:04
If I take the `components` folder outside from `src` folder, then it tells me that I need to modify the `node_modules` files, which is not my attention. — Vladimir Jovanović, Jun 08 '17 at 15:06
You don't need to move anything. You have incorrect relative path. If you are importing inside './src/app.js' it should be `import smth from './components/header/header'` Same for this line `import navBar from './src/components/header/navBar'` it should be relative to current path `import navBar from './navBar'` — Yury Tarabanko, Jun 08 '17 at 15:10
This may or may not be relevant for this situation but also be mindful of case in your directory paths. I had a situation where my local directories were lower case, but in prod they were upper. I had to completely wipe away my local structure and clone from prod to fix it, otherwise I was going to spend a lot of time refactoring directory names. — Jordan H, Apr 13 '21 at 18:46

score 199 · Accepted Answer · answered Jun 08 '17 at 15:38

The way we usually use import is based on relative path.

. and .. are similar to how we use to navigate in terminal like cd .. to go out of directory and mv ~/file . to move a file to current directory.

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

In your case, App.js is in src/ directory while header.js is in src/components. To import you would do import Header from './components/header'. This roughly translate to in my current directory, find the components folder that contain a header file.

Now, if from header.js, you need to import something from card, you would do this. import Card from '../containers/card'. This translate to, move out of my current directory, look for a folder name containers that have a card file.

As for import React, { Component } from 'react', this does not start with a ./ or ../ or / therefore node will start looking for the module in the node_modules in a specific order till react is found. For a more detail understanding, it can be read here.

score 40 · Answer 2 · edited Jul 25 '19 at 18:46

40

If you create an application with react-create-app, don't forget set environment variable:

NODE_PATH=./src

Or add to .env file to your root folder;

edited Jul 25 '19 at 18:46

Seth McClaine

9,142
6
38
64

answered Feb 04 '18 at 00:30

comalex3

2,497
4
26
47

2

This is the one the solved for me. I added a simple `App.css` to `src/` and did `import App.css`. But that gave me the error of the question. This answer solved the issue. – Maximiliano Guerra Jul 25 '18 at 12:40
I thought I was crazy my react app wasn't working as expected and I just paste this environment variable and it just works... The thing is why it doesn't come with this file already... I don't get it, if react spends twelve minutes downloading a bunch of dependencies why it doesn't come with these file. – Classy-Bear May 01 '21 at 19:12

score 31 · Answer 3 · answered Feb 18 '20 at 08:04

31

Deleted the package-lock.json file & then ran

npm install

Read further

answered Feb 18 '20 at 08:04

Ivan_ug

2,467
2
17
18

Thank you so much, I had the following error: Module not found: Can't resolve... TextInput and your solution solved it – Vladimir Salguero Jun 26 '21 at 23:37
This is good idea to do on any project we get from outside. – PAS Mar 28 '23 at 19:47

Tuhin A. · Answer 4 · 2020-06-23T16:29:22.783

27

in my case, The error message was

Module not found: Error: Can't resolve '/components/body

While everything was in the correct directory.

I found that renaming body.jsx to body.js resolve the issue!

So I added this code in webpack.config.js to resolve jsx as js

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

And then build error gone!

edited Jun 23 '20 at 16:29

answered Jun 23 '20 at 16:21

Tuhin A.

529
5
13

2

Indeed, in my case I had forgotten to put ".tsx" in the extensions array. – code_dude Jul 18 '22 at 18:33

score 16 · Answer 5 · answered Dec 20 '19 at 16:15

16

Adding NODE_PATH as environment variable in .env is deprecated and is replaced by adding "baseUrl": "./src", to compilerOptions in jsconfig.json or tsconfig.json.

Reference

answered Dec 20 '19 at 16:15

Melchia

22,578
22
103
117

score 9 · Answer 6 · answered Oct 18 '19 at 05:23

9

I think its the double use of header. I just tried something similar myself and also caused issues. I capitalized my component file to match the others and it worked.

import Header from './src/components/header/header';

Should be

import Header from './src/components/header/Header';

answered Oct 18 '19 at 05:23

FBaez51

482
1
7
12

I hate this gave me the answer because I havd the same folder structure and instead of doing `./components/header/header` I was doing `./components/header` ... I am too old for those kinda mistakes lolol – Chris Oct 15 '20 at 19:50
@Chris what's up with that? I also fixed mine doing the same. So confusing. Anyone with a simple explanation? – Filipe Madureira Jun 03 '22 at 16:02

Michgolden Ukeje · Answer 7 · 2020-08-22T19:29:17.957

There is a better way you can handle the import of modules in your React App. Consider doing this:

Add a jsconfig.json file to your base folder. That is the same folder containing your package.json. Next define your base URL imports in it:

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

Now rather than calling ../../ you can easily do this instead:

import navBar from 'components/header/navBar'
import 'css/header.css'

Notice that 'components/' is different from '../components/'

It's neater this way.

But if you want to import files in the same directory you can do this also:

import logo from './logo.svg'

score 7 · Answer 8 · answered May 04 '22 at 12:59

7

I solved by putting the file extension

import MyComponent from "src/components/MyComponent";

to

import MyComponent from "src/components/MyComponent.tsx";

answered May 04 '22 at 12:59

Leonardo Soares

94
1
5

? TS2691: An import path cannot end with a '.tsx' extension. – TonyG Feb 14 '23 at 22:36
1

[This is the actual fix](https://stackoverflow.com/a/62539344/542251) for this – Liam Feb 27 '23 at 10:19

score 3 · Answer 9 · edited Jul 25 '19 at 18:48

3

I had a similar issue.

Cause:

import HomeComponent from "components/HomeComponent";

Solution:

import HomeComponent from "./components/HomeComponent";

NOTE: ./ was before components. You can read @Zac Kwan's post above on how to use import

edited Jul 25 '19 at 18:48

Seth McClaine

9,142
6
38
64

answered Mar 01 '19 at 13:15

Bukunmi

2,504
1
18
15

score 3 · Answer 10 · answered Feb 13 '20 at 12:38

I faced the same issue when I created a new react app, I tried all options in https://github.com/facebook/create-react-app/issues/2534 but it didn't help. I had to change the port for the new app and then it worked. By default, apps use the port 3000.I changed the port to 8001 in package.json as follows:

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

score 3 · Answer 11 · answered Apr 29 '22 at 06:31

If you are using create-react-app, and have just added typescript to it, check whether a tsconfig.json has been auto-generated for you. The CRA docs say that it should be, but there seems to be a bug at the moment where it is not being generated.

If the tsconfig.json is missing, there's a few ways to create one yourself.

Copy one off the internet or from another repo
npx tsc --init
Create a fresh project somewhere else using npx create-react-app my-ts-proj --template typescript and then copy the tsconfig over from there

score 2 · Answer 12 · answered Oct 16 '19 at 10:09

2

You can try to execute 'npm install' in the app folder. This might also solve the problem. It worked for me.

answered Oct 16 '19 at 10:09

npaly

29
3

1

specifically if the package was installed with another user previously. ie: check access privileges of files/folders – til Mar 04 '21 at 16:03

William Ji Carpenter · Answer 13 · 2022-04-25T11:16:53.450

I just had this issue from auto-importing a component, no type or webpack config issues.

What fixed it was changing the import from relative to the app root directory to relative to the file:

import MyComponent from "src/components/MyComponent";

to

import MyComponent from "../components/MyComponent";

If you're getting this from Visual Studio Code auto-importing via the shortest route, you can change it so it imports relatively. By going here:

menu File → Preferences → Settings → User Settings,

"typescript.preferences.importModuleSpecifier": "relative"

score 0 · Answer 14 · answered Oct 11 '19 at 15:02

0

you should change import Header from './src/components/header/header' to

import Header from '../src/components/header/header'

answered Oct 11 '19 at 15:02

harun ugur

1,718
18
18

score 0 · Answer 15 · answered Jul 01 '21 at 10:02

0

replace ReactDOM.render(<Header/>, document.getElementById('header')); by export default Header in Header.js

answered Jul 01 '21 at 10:02

score 0 · Answer 16 · edited Aug 18 '22 at 11:30

0

It is working for me just (./) no need src here

import Header from './components/header/header'

edited Aug 18 '22 at 11:30

vimuth

5,064
33
79
116

answered Aug 13 '22 at 12:38

Habib01

63
6

score 0 · Answer 17 · answered Nov 25 '22 at 04:34

0

You might be importing .tsx file inside a .js file. Ensure that if you are working on a javascript source, you have extensions .js or .jsx not .tsx :)

answered Nov 25 '22 at 04:34

Abhishek E H

479
2
7
14

Nice catch thanks – Mustkeem K Aug 13 '23 at 07:18

score 0 · Answer 18 · answered Jun 21 '23 at 05:38

0

Also, with next.js framework I got the same error after deleting the "loading.tsx" (not imported anywhere). Just in case you have similar situation. I resolved by removing the .next/cache/webpack. Or remove the entire .next/cache directory

answered Jun 21 '23 at 05:38

Roman86

1,990
23
22

score 0 · Answer 19 · answered Jul 28 '23 at 08:50

I am sure you have solved this by now but let me add it for future reference. I did encounter the same issue and my issue was on renaming and path refernce. Have a look at this, code when getting the error

import Account from "./account";

The problem is with path reference and naming

Here is the correct code

import Account from "./pages/dashboard/Account";

score -1 · Answer 20 · edited Jul 25 '19 at 18:47

-1

You need to be in project folder, if you are in src or public you have to come out of those folders. Suppose your react-project name is 'hello-react' then cd hello-react

edited Jul 25 '19 at 18:47

Seth McClaine

9,142
6
38
64

answered Feb 07 '19 at 11:52

sobha

1

score -1 · Answer 21 · edited Mar 12 '20 at 19:34

I was facing the same problem and I resolved it. See if your index.js file is in src folder, then what ever file you are importing, the folder containing that must also be inside the src folder.

That means if your components folder is outside the src folder, just drag it inside the src folder in your editor because the files outside of src folder are not imported.

Then you shall be able to import using ./components/header/header(in this case) enter image description here

score -1 · Answer 22 · answered Dec 17 '20 at 17:13

For me, I had the input correct but npm start can be buggy (at least using it with Hyper terminal on Windows and Linux). If I move files to different folders, npm start doesn't pick up on these changes. I need to cancel npm start process, make the move, save and then run npm start and it will see the files now.

score -3 · Answer 23 · answered Sep 11 '19 at 02:52

Check for the import statements.It should be ended with semicolon. If you miss any, you will get this error.

Also check whether following import statement added in you component.

import { threadId } from 'worker_threads';

If so remove that line. It works for me.

score -3 · Answer 24 · edited Dec 04 '19 at 23:00

-3

In my case I rename a component file, an VS Code add the below line of code for me:

import React, { Component } from "./node_modules/react";

So I fixed by removing the: ./node_modules/

import React, { Component } from "react";

Cheers!

edited Dec 04 '19 at 23:00

mypetlion

2,415
5
18
22

answered Dec 04 '19 at 22:07

Carlos A Avilez J

17
3

score -3 · Answer 25 · answered Feb 23 '21 at 19:44

I think it may help you-

Read your error carefully-./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

just write- ./header/header instead ./src/components/header/header in App.js

if it doesnt work try to change header file name may be head

Can't resolve module (not found) in React.js

25 Answers25

Linked

Related