CODEWITHSUNDEEP
javascriptreactjs
Sambulo Senda
Sambulo Senda

Reputation: 1418

Module not found: Can't resolve './pages' Failed to compile

Hi I am importing a home component stored in pages folder. Adding it to the Router of my application

Get the error below ./src/App.js Module not found: Can't resolve './pages'

But I seem to have done it correctly?Module not found: Can't resolve './pages'

Please help me why its saying module not found when its there

App.JS CODE

import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { Route } from 'react-router-dom';
import Home from "./pages";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/browse">
          <p>I will be the sign in page</p>
        </Route>
        <Route path="/signin">
          <p>I will be the sign up page</p>
        </Route>
        <Route path="/browse">
          <p>I will be the browse page</p>
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

home.js CODE

import React from 'react';

export default function Home() {
    return (
        <h1>Hello Sambulo</h1>      
    )
}

Upvotes: 1

Views: 513

Answers (2)

Eric
Eric

Reputation: 1357

According to React component name convention, it is better to use Home.js as the file name. So this one is also working.

import Home from "./pages/Home";

Component name should be in PascalCase.

For example, MyComponent, MyChildComponent etc.

Upvotes: 1

Jacob Belanger
Jacob Belanger

Reputation: 71

When you import from './pages' the default behavior is to look for for a file named index.js in the ./pages folder.

If you want to import home.js you have to change the import to

import Home from "./pages/home.js";

the .js at the end is optional as .js is the default file extension for imports

Upvotes: 1

Related Questions