Home > front end >  Can't resolve errors in React JS project
Can't resolve errors in React JS project

Time:02-10

I keep getting these 3 errors, but as far as I can tell I used the correct path and for the 'react-router-dom' error, I already installed that.

Compiled with problems:

ERROR in ./src/index.js 7:0-44 Module not found: Error: Can't resolve './PortfolioPage' in '/Users/AishaS/Desktop/React Portfolio Project/react-portfolio-project/src'

ERROR in ./src/index.js 10:0-74 Module not found: Error: Can't resolve 'react-router-dom' in '/Users/AishaS/Desktop/React Portfolio Project/react-portfolio-project/src'

ERROR in ./src/index.js 11:0-66 Module not found: Error: Can't resolve './components' in '/Users/AishaS/Desktop/React Portfolio Project/react-portfolio-project/src'

import React from "react";
import { render } from "react-dom";
import Gallery from "react-photo-gallery";
import { portfolio } from "./PortfolioPage";
import ReactDOM from "react-dom";
import "./index.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import {
  Navigation,
  Footer,
  About,
  Contact
} from "./components";

ReactDOM.render(
  <Router>
    <Navigation />
    <Routes>
      <Route path="/portfoliopage"  />
      <Route path="/about"  />
      <Route path="/contact" />
    </Routes>
    <Footer />
  </Router>,

  document.getElementById("root")
);

function columns(containerWidth) {
  let columns = 1;
  if (containerWidth >= 500) columns = 2;
  if (containerWidth >= 900) columns = 3;
  if (containerWidth >= 1500) columns = 4;
  return columns;
}

const App = () => {
  return (
    <div>
      <Gallery portfolio={portfolio} columns={columns} direction="column" />
    </div>
  );
};

render(<App />, document.getElementById("app"));

CodePudding user response:

Your code is unable to locate the files that you are trying to import from. Would you be able to show the file structure of the project? You need to make sure that the files PortfolioPage and the folder components are on the same level as this file.

Also, make sure you have installed react-router-dom properly using npm i react-router-dom. Looks like its not installed properly.

  •  Tags:  
  • Related