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
– Yury Tarabanko, Commented Jun 8, 2017 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ć
– Vladimir Jovanović, Commented Jun 8, 2017 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
– Yury Tarabanko, Commented Jun 8, 2017 at 15:10

Zac Kwan · Accepted Answer · 2017-06-08 15:38:33Z

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.

Seth McClaine · Accepted Answer · 2019-07-25 18:46:40Z

42

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, 2019 at 18:46

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

answered Feb 4, 2018 at 0:30

comalex3

2,6244 gold badges31 silver badges48 bronze badges

2 Comments

Maximiliano Guerra Over a year ago

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.

Classy-Bear Over a year ago

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.

Ivan_ug · Accepted Answer · 2020-02-18 08:04:31Z

36

Deleted the package-lock.json file & then ran

npm install

Read further

answered Feb 18, 2020 at 8:04

Ivan_ug

2,6252 gold badges19 silver badges19 bronze badges

2 Comments

Vladimir Salguero Over a year ago

Thank you so much, I had the following error: Module not found: Can't resolve... TextInput and your solution solved it

PAS Over a year ago

This is good idea to do on any project we get from outside.

Tuhin A. · Accepted Answer · 2020-06-23 16:29:22Z

31

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, 2020 at 16:29

answered Jun 23, 2020 at 16:21

Tuhin A.

6266 silver badges15 bronze badges

1 Comment

code_dude Over a year ago

Indeed, in my case I had forgotten to put ".tsx" in the extensions array.

Melchia · Accepted Answer · 2019-12-20 16:15:31Z

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, 2019 at 16:15

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

Comments

Leonardo Soares · Accepted Answer · 2022-05-04 12:59:08Z

15

I solved by putting the file extension

import MyComponent from "src/components/MyComponent";

to

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

answered May 4, 2022 at 12:59

Leonardo Soares

1741 silver badge6 bronze badges

2 Comments

TonyG Over a year ago

? TS2691: An import path cannot end with a '.tsx' extension.

Liam Over a year ago

This is the actual fix for this

FBaez51 · Accepted Answer · 2019-10-18 05:23:47Z

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, 2019 at 5:23

FBaez51

5611 gold badge8 silver badges12 bronze badges

2 Comments

Chris Over a year ago

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

Filipe Madureira Over a year ago

@Chris what's up with that? I also fixed mine doing the same. So confusing. Anyone with a simple explanation?

Michgolden Ukeje · Accepted Answer · 2020-08-22 19:29:17Z

9

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'

edited Aug 22, 2020 at 19:29

answered Aug 22, 2020 at 19:09

Michgolden Ukeje

1211 silver badge5 bronze badges

Comments

Seth McClaine · Accepted Answer · 2019-07-25 18:48:08Z

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, 2019 at 18:48

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

answered Mar 1, 2019 at 13:15

Bukunmi

2,5741 gold badge20 silver badges15 bronze badges

Comments

npaly · Accepted Answer · 2019-10-16 10:09:14Z

3

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

answered Oct 16, 2019 at 10:09

npaly

393 bronze badges

1 Comment

til Over a year ago

specifically if the package was installed with another user previously. ie: check access privileges of files/folders

seb_dom · Accepted Answer · 2020-02-13 12:38:36Z

3

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

answered Feb 13, 2020 at 12:38

seb_dom

1137 bronze badges

Comments

Cam Jackson · Accepted Answer · 2022-04-29 06:31:32Z

3

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

answered Apr 29, 2022 at 6:31

Cam Jackson

12.4k8 gold badges50 silver badges80 bronze badges

Comments

William Ji Carpenter · Accepted Answer · 2022-04-25 11:16:53Z

1

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"

edited Apr 25, 2022 at 11:16

answered Apr 8, 2022 at 14:23

William Ji Carpenter

3481 gold badge4 silver badges12 bronze badges

Comments

harun ugur · Accepted Answer · 2019-10-11 15:02:44Z

0

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

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

answered Oct 11, 2019 at 15:02

harun ugur

1,87222 silver badges20 bronze badges

Comments

user14913615 · Accepted Answer · 2021-07-01 10:02:50Z

0

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

answered Jul 1, 2021 at 10:02

user14913615

Comments

vimuth · Accepted Answer · 2022-08-18 11:30:51Z

0

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

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

edited Aug 18, 2022 at 11:30

vimuth

5,87355 gold badges98 silver badges128 bronze badges

answered Aug 13, 2022 at 12:38

Habib01

1491 gold badge2 silver badges6 bronze badges

Comments

Abhishek E H · Accepted Answer · 2022-11-25 04:34:42Z

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, 2022 at 4:34

Abhishek E H

4822 gold badges7 silver badges15 bronze badges

Comments

Roman86 · Accepted Answer · 2023-06-21 05:38:45Z

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, 2023 at 5:38

Roman86

2,35927 silver badges28 bronze badges

Comments

Paul Munyao · Accepted Answer · 2023-07-28 08:50:49Z

0

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

answered Jul 28, 2023 at 8:50

Paul Munyao

3352 silver badges12 bronze badges

Comments

Adele · Accepted Answer · 2024-04-10 10:35:55Z

0

I face the same odd issue ,everything will be fine when local npm run dev
but when depoly and run build, sth happend:
when import Hearder from "./common/Header";
it would Module not found: Can't resolve ./commom/Header
I checked the tsconfig and changed my baseUrl, it not working,
but after import Hearder from "./common/myHeader"; it works...
maybe double "Header" is NOT allowed .

btw my header file is

 const Hearder = () => {
  const { viewPort } = useViewport();
  return <div className="header">{viewPort}</div>;
};

export default Hearder;

answered Apr 10, 2024 at 10:35

Adele

591 silver badge4 bronze badges

Comments

Anju Ucok Lubis · Accepted Answer · 2024-04-30 14:20:05Z

0

i found the same problem and now i use :

"react": "^18.3.1",
"react-router-dom": "^6.23.0",

the solution is to change

from

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

to

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

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

answered Apr 30, 2024 at 14:20

Anju Ucok Lubis

112 bronze badges

Comments

ea0723 · Accepted Answer · 2025-02-17 17:46:17Z

For any Ruby on Rails devs who run into this issue (Error: Cannot find module ‘path’)…

When importing modules, components, handlers, etc. in react, the import reference is relative to the location of the file you’re importing vs a rails resource or asset which is absolute to the rails structure.

In rails, if you’re accessing an image in the app/assets/images directory, it’s an absolute reference to the assets folder and looks something like this:

<%= image_tag “image.png” %>

Any sub-folders are referenced by adding that folder to the filename

<%= image_tag “home/image.png” %>

(More info on the rails asset pipeline here)

In react if you have a structure like this:

—app
——javascript 
————components 
——————Sidebar.jsx 
————utils
——————sidebarUtil.js

And you want to import a handler from your app/javascript/utils/sidebarUtil.js into app/javascript/components/Sidebar.jsx, your import will look like this:

import { handler } from “../../utils/sidebarUtil“

Where each .. takes you up one level in your file structure just like in your terminal when changing directory.

If the handler you want to import is in a file in the same directory, use

import { handler } from “./moduleName”

Seth McClaine · Accepted Answer · 2019-07-25 18:47:39Z

-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, 2019 at 18:47

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

answered Feb 7, 2019 at 11:52

sobha

1

Comments

Kevin H · Accepted Answer · 2020-03-12 19:34:31Z

-1

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

edited Mar 12, 2020 at 19:34

Kevin H

1,4194 gold badges22 silver badges43 bronze badges

answered Mar 12, 2020 at 17:38

Biraj Gupta

11 bronze badge

Comments

Clifton Hill · Accepted Answer · 2020-12-17 17:13:53Z

-1

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.

answered Dec 17, 2020 at 17:13

Clifton Hill

411 silver badge9 bronze badges

Comments

mypetlion · Accepted Answer · 2019-12-04 23:00:12Z

-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 4, 2019 at 23:00

mypetlion

2,5445 gold badges21 silver badges22 bronze badges

answered Dec 4, 2019 at 22:07

Carlos A Avilez J

173 bronze badges

Comments

Anurag Nema · Accepted Answer · 2021-02-23 19:44:14Z

-3

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

answered Feb 23, 2021 at 19:44

Anurag Nema

427 bronze badges

Comments

Saliya Wicky · Accepted Answer · 2019-09-11 02:52:35Z

-4

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.

answered Sep 11, 2019 at 2:52

Saliya Wicky

233 bronze badges

Collectives™ on Stack Overflow

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

28 Answers 28

Comments

2 Comments

2 Comments

1 Comment

Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

28 Answers 28

Comments

2 Comments

2 Comments

1 Comment

Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related