React JS: Failed to compile Module not found: Can't resolve 'views/Components/Components.js'

Question

I have been googling about this error and found so many suggestions and solutions but none of them works for my case. Things that I have done are:

1. npm install
2. corrected the paths "views/Components/Components.js" as per suggestion on Can't resolve module (not found) in React.js
3. adding/removing the file extension as per suggestion on Module not found: Error: Can't resolve './components/PropTest1' - React JS

I aware that I am a newbie, I need some guidance from the masters here.

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.js";
// pages for this product
import Components from "views/Components/Components.js";
import { Router, Route, Switch } from "react-router-dom";

import reportWebVitals from "./reportWebVitals";

var hist = createBrowserHistory();

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/landing-page" component={LandingPage} />
      <Route path="/profile-page" component={ProfilePage} />
      <Route path="/login-page" component={LoginPage} />
      <Route path="/" component={Components} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

reportWebVitals();

App.js

import React from "react";
import "./App.css";
import Products from "./components/products"
import "bootstrap/dist/css/bootstrap.min.css";


function App() {
  return (
    <div className="App">
      <Products />
    </div>
  );
}

export default App;

And my folder tree is:

my-react-project
-node_modules
-public
-src
--assets
--components
----Header
-------Header.js
-------HeaderLinks.js
----products.js
--views
-------Components
----------Components.js
--App.css
--App.js
--App.test.js
--index.css
--index.js
--logo.svg
--reportWebVitals.js
--setupTest.js
-package.json
-package-lock.json
-yarn.lock

The error I receives:

./src/index.js
Module not found: Can't resolve 'views/Components/Components.js' in 'D:\coding\workspace\my-react-project\src'

Answer 1

You need a./ at yow import Components from “views....

It needs to be import Components from “./views..

Answer 2

In your index.js file replace

import Components from "views/Components/Components.js";

with

import Components from "./views/Components/Components.js";

Answer 3

you just have to take a lot at Absolute vs. Relative import paths :

in your current senario I have been googling about this error and found so many suggestions and solutions but none of them works for my case. Things that I have done are:

npm install corrected the paths "views/Components/Components.js" as per suggestion on Can't resolve module (not found) in React.js adding/removing the file extension as per suggestion on Module not found: Error: Can't resolve './components/PropTest1' - React JS I aware that I am a newbie, I need some guidance from the masters here.

index.js

import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App.js";
    // pages for this product
    import Components from "./views/Components/Components.js"; **<--- add here ./**
    import { Router, Route, Switch } from "react-router-dom";
    
    import reportWebVitals from "./reportWebVitals";
    
    var hist = createBrowserHistory();
    
    ReactDOM.render(
      <Router history={hist}>
        <Switch>
          <Route path="/landing-page" component={LandingPage} />
          <Route path="/profile-page" component={ProfilePage} />
          <Route path="/login-page" component={LoginPage} />
          <Route path="/" component={Components} />
        </Switch>
      </Router>,
      document.getElementById("root")
    );
    
    reportWebVitals();