CODEWITHSUNDEEP
reactjs
JoshH
JoshH

Reputation: 3

Module not found: Can't resolve './pages

I'm having issues that I've never experienced before. Recently, I've started a new project with create-react-app however, I'm shown an error:

./src/App.js
Module not found: Can't resolve './pages/' in '

Folder Structure

I've tried different file paths but in my previous projects this is the path that has worked but for some reason, it doesn't work anymore.

App.js

import React from 'react';
import Home from './pages'

function App() {

  return (
    <div>
      <h1>Hello</h1>
      <Home />
    </div>

  );
}

export default App;

Home.js

import React from 'react'

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

If someone could help that would be great! I've been trying to solve this for the past 3hrs and nothing has come from it! Thanks in advance!

Upvotes: 0

Views: 3843

Answers (4)

K. Pavani
K. Pavani

Reputation: 1

You're trying to import the Home component directly from ./pages, but it fails because the folder doesn't have an index.js file. Solution:

1.Create an index.js file inside the pages folder with this code: export { default as Home } from './Home';

2.Update your import in App.js to: import { Home } from './pages';

Alternative Solution: If you prefer a quick fix, directly import the Home component import Home from './pages/Home';

Upvotes: 0

Fardeen Panjwani
Fardeen Panjwani

Reputation: 407

The reason you're code is failing is because the pages folder doesn't have an index.js file. If you want to import the Home page component directly from the pages folder, without using import Home from "./pages/home" syntax, you'll have to create an index.js file, inside the pages directory, that exports the home component, like this:

"./pages/index.js"

...
export * from './home';
export * from './someOtherPage';
....

Then, in App.js, you can import the Home component like this:

...
import { Home, SomeOtherComponent } from './pages';
...

Upvotes: 3

user14709104
user14709104

Reputation:

What you've imported as ./pages is actually the folder when you need to import the file itself. So it should be something like this:

import React from 'react';
import Home from './pages/Home.js'

function App() {

  return (
    <div>
      <h1>Hello</h1>
      <Home />
    </div>

  );
}

export default App;

Upvotes: 0

ינון רחמים
ינון רחמים

Reputation: 706

Try './pages/Home' instead of './pages'

Upvotes: 0

Related Questions