Search code examples
javascriptreactjsreact-hookscreate-react-app

create-react-app errors not able to solve: Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

I have tried each and every solutions available on the internet yet I could not solve these errors. Please help me. Facing errors like:

  1. Warning: Each child in a list should have a unique "key" prop.

    Check the render method of Home. See https://reactjs.org/link/warning-keys for more information. at tr at Home (http://localhost:3000/static/js/bundle.js:679:75) at Routes (http://localhost:3000/static/js/bundle.js:43822:5) at div at Router (http://localhost:3000/static/js/bundle.js:43755:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:42564:5) at App

  2. Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

    at resolveTo (router.ts:549:1) at hooks.tsx:252:1 at mountMemo (react-dom.development.js:17225:1) at Object.useMemo (react-dom.development.js:17670:1) at useMemo (react.development.js:1650:1) at useResolvedPath (hooks.tsx:252:1) at useHref (hooks.tsx:40:1) at LinkWithRef (index.tsx:267:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1)

  3. The above error occurred in the component:at LinkWithRef (http://localhost:3000/static/js/bundle.js:42666:5) at td at tr at tbody at table at div at div at Home (http://localhost:3000/static/js/bundle.js:679:75) at Routes (http://localhost:3000/static/js/bundle.js:43822:5) at div at Router (http://localhost:3000/static/js/bundle.js:43755:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:42564:5) at App

  4. Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

    at resolveTo (router.ts:549:1) at hooks.tsx:252:1 at mountMemo (react-dom.development.js:17225:1) at Object.useMemo (react-dom.development.js:17670:1) at useMemo (react.development.js:1650:1) at useResolvedPath (hooks.tsx:252:1) at useHref (hooks.tsx:40:1) at LinkWithRef (index.tsx:267:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1)

  5. Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

    at resolveTo (router.ts:549:1) at hooks.tsx:252:1 at mountMemo (react-dom.development.js:17225:1) at Object.useMemo (react-dom.development.js:17670:1) at useMemo (react.development.js:1650:1) at useResolvedPath (hooks.tsx:252:1) at useHref (hooks.tsx:40:1) at LinkWithRef (index.tsx:267:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1)

Here are my codes:

App.js:

            import "../node_modules/bootstrap/dist/css/bootstrap.css";
            import Navbar from "./component/layout/Navbar";
            import About from "./component/pages/About";
            import Contact from "./component/pages/Contact";
            import Home from "./component/pages/Home";
            import NotFound from "./component/pages/NotFound";
            import React from "react";
            import "./App.css";
            import AddUser from "./component/users/AddUser";
            import EditUser from "./component/users/EditUser";
            import User from "./component/users/User";
            import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
            
            function App(props) {
              return (
                <Router>
                  <div className="App">
                    <Navbar />
                    <Routes>
                      <Route path="/" element={<Home />} />
                      <Route path="/about" element={<About />} />
                      <Route path="/contact" element={<Contact />} />
                      <Route path="/users/add" element={<AddUser />} />
                      <Route path="/users/edit/:id" element={<EditUser />} />
                      <Route path="/users/:id" element={<User />} />
                      <Route path="*" element={<NotFound />} />
                    </Routes>
                  </div>
                </Router>
              );
            }
            
            export default App;

    Home.js:
    
    import React, { useState, useEffect } from "react";
    import axios from "axios";
    import { Link } from "react-router-dom";
    
    const Home = () => {
      const [users, setUser] = useState([]);
    
      useEffect(() => {
        loadUsers();
      }, []);
    
      const loadUsers = async () => {
        const result = await axios.get("http://localhost:3001/users");
        setUser(result.data.reverse());
      };
    
      const deleteUser = async (id) => {
        await axios.delete(`http://localhost:3001/users/${id}`);
        loadUsers();
      };
    
      return (
        <div className="container">
          <div className="py-4">
            <h1>Home Page</h1>
            <table className="table border shadow">
              <thead className="thead-dark">
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">User Name</th>
                  <th scope="col">Email</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user, index) => (
                  <tr>
                    <th scope="row">{index + 1}</th>
                    <td>{user.name}</td>
                    <td>{user.username}</td>
                    <td>{user.email}</td>
                    <td>
                      <Link
                        className="btn btn-primary mr-2"
                        to={`/users/${user.id}`}
                      >
                        View
                      </Link>
                      <Link
                        className="btn btn-outline-primary mr-2"
                        to={`/users/edit/${user.id}`}
                      >
                        Edit
                      </Link>
                      <Link
                        className="btn btn-danger"
                        onClick={() => deleteUser(user.id)}
                      >
                        Delete
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      );
    };
    
    export default Home;

About.js:

    import React from "react";

const About = () => {
  return (
    <div className="container">
      <div className="py-4">
        <h1>About Page</h1>
        <p className="lead">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque rerum
          hic ab veniam reiciendis cum repudiandae, voluptate explicabo nesciunt
          nam accusantium? Soluta cupiditate, accusamus commodi praesentium
          laborum dolorum libero maiores!
        </p>

        <p className="lead">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque rerum
          hic ab veniam reiciendis cum repudiandae, voluptate explicabo nesciunt
          nam accusantium? Soluta cupiditate, accusamus commodi praesentium
          laborum dolorum libero maiores!
        </p>
        <p className="lead">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque rerum
          hic ab veniam reiciendis cum repudiandae, voluptate explicabo nesciunt
          nam accusantium? Soluta cupiditate, accusamus commodi praesentium
          laborum dolorum libero maiores!
        </p>
      </div>
    </div>
  );
};

export default About;

Contact.js:

    import React from "react";

const Contact = () => {
  return (
    <div className="container">
      <div className="py-4">
        <h1>Contact Page</h1>
        <form>
          <div className="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input
              type="email"
              className="form-control"
              id="exampleInputEmail1"
              aria-describedby="emailHelp"
            />
            <small id="emailHelp" className="form-text text-muted">
              We'll never share your email with anyone else.
            </small>
          </div>
          <div className="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input
              type="password"
              className="form-control"
              id="exampleInputPassword1"
            />
          </div>
          <div className="form-group form-check">
            <input
              type="checkbox"
              className="form-check-input"
              id="exampleCheck1"
            />
            <label className="form-check-label" for="exampleCheck1">
              Check me out
            </label>
          </div>
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default Contact;

User.js: 

    import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import axios from "axios";

const User = () => {
  const [user, setUser] = useState({
    name: "",
    username: "",
    email: "",
    phone: "",
    webiste: "",
  });
  const { id } = useParams();
  useEffect(() => {
    loadUser();
  }, []);
  const loadUser = async () => {
    const res = await axios.get(`http://localhost:3001/users/${id}`);
    setUser(res.data);
  };
  return (
    <div className="container py-4">
      <Link className="btn btn-primary" to="/">
        back to Home
      </Link>
      <h1 className="display-4">User Id: {id}</h1>
      <hr />
      <ul className="list-group w-50">
        <li className="list-group-item">name: {user.name}</li>
        <li className="list-group-item">user name: {user.username}</li>
        <li className="list-group-item">email: {user.email}</li>
        <li className="list-group-item">phone: {user.phone}</li>
        <li className="list-group-item">website: {user.website}</li>
      </ul>
    </div>
  );
};

export default User;

EditUser.js:

    import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";

const EditUser = () => {
  let history = useNavigate();
  const { id } = useParams();
  const [user, setUser] = useState({
    name: "",
    username: "",
    email: "",
    phone: "",
    website: "",
  });

  const { name, username, email, phone, website } = user;
  const onInputChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  useEffect(() => {
    loadUser();
  }, []);

  const onSubmit = async (e) => {
    e.preventDefault();
    await axios.put(`http://localhost:3001/users/${id}`, user);
    history.push("/");
  };

  const loadUser = async () => {
    const result = await axios.get(`http://localhost:3001/users/${id}`);
    setUser(result.data);
  };
  return (
    <div className="container">
      <div className="w-75 mx-auto shadow p-5">
        <h2 className="text-center mb-4">Edit A User</h2>
        <form onSubmit={(e) => onSubmit(e)}>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Name"
              name="name"
              value={name}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Username"
              name="username"
              value={username}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="email"
              className="form-control form-control-lg"
              placeholder="Enter Your E-mail Address"
              name="email"
              value={email}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Phone Number"
              name="phone"
              value={phone}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Website Name"
              name="website"
              value={website}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <button className="btn btn-warning btn-block">Update User</button>
        </form>
      </div>
    </div>
  );
};

export default EditUser;

AddUser.js:

    import React, { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const AddUser = () => {
  let history = useNavigate();
  const [user, setUser] = useState({
    name: "",
    username: "",
    email: "",
    phone: "",
    website: "",
  });

  const { name, username, email, phone, website } = user;
  const onInputChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    await axios.post("http://localhost:3001/users", user);
    history.push("/");
  };
  return (
    <div className="container">
      <div className="w-75 mx-auto shadow p-5">
        <h2 className="text-center mb-4">Add A User</h2>
        <form onSubmit={(e) => onSubmit(e)}>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Name"
              name="name"
              value={name}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Username"
              name="username"
              value={username}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="email"
              className="form-control form-control-lg"
              placeholder="Enter Your E-mail Address"
              name="email"
              value={email}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Phone Number"
              name="phone"
              value={phone}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Website Name"
              name="website"
              value={website}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <button className="btn btn-primary btn-block">Add User</button>
        </form>
      </div>
    </div>
  );
};

export default AddUser;

Navbar.js:

    import React from "react";
import { Link, NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
      <div className="container">
        <Link className="navbar-brand" to="/">
          React App
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse">
          <ul className="navbar-nav mr-auto">
            <li className="nav-item">
              <NavLink className="nav-link" to="/">
                Home
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/about">
                About
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/contact">
                Contact
              </NavLink>
            </li>
          </ul>
        </div>

        <Link className="btn btn-outline-light" to="/users/add">
          Add User
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

package.json:

    {
  "name": "mycrudapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "concurrently": "^7.3.0",
    "json-server": "^0.17.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "json-server": "json-server --watch db.json --port 3001",
    "start:dev": "concurrently \"npm start\" \"npm run json-server\"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Solution

  • Solve error #1 with this:

    {
    users.map((user, index) => {
        return (
            <tr key={index}>
                ...
            </tr>
        );
    });
}

    Errors #2 and #4 are the same. Double-check your use of Link element from react-router-dom as there are breaking changes from v5 to v6. This might also help: TypeError: Cannot read properties of undefined (reading 'pathname')