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

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.

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

Deleted the package-lock.json file & then ran

npm install

Read further

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

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!

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

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'

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!

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.

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

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

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

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

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

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

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.

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;

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)