Module not found: Error: Can't resolve 'Home'

Question

I have just began learning React, and have stumbled upon this error while trying to build using webpack.

Module not found: Error: Can't resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'
resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'

My webpack.config.js:

const path = require('path');
module.exports = {
  entry: {
    index: '.src/index.js',
    js: './src/js/index2.js',
    react: './src/components/App.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['env', 'stage-0', 'react']
        }
      }
    ]
  }
};

My Home.js:


const Home = () => {
  return <h1>Home</h1>
}

export default Home

This is how I've imported Home in App.js:

import { BrowserRouter, Route, Switch , Link} from 'react-router-dom';
import Home from 'Home';
import About from 'About';

I came across few questions on here, which suggested adding an empty index.js in src folder, but that too didn't work.

@AnuragSrivastava seems like I was passing a the wrong path all this while. Thank You! — Abhishek Jain, Apr 20 '20 at 19:08

score 2 · Accepted Answer · answered Apr 19 '20 at 17:51

2

your import is not correct

import Home from 'Home';
import About from 'About';

you need to specify the path and of the file, for example:

import Home from './src/components/Home.js';

home.js is the file where you exported your component

answered Apr 19 '20 at 17:51

asma

599
1
7
19

Module not found: Error: Can't resolve 'Home'

1 Answers1