Old LOCKFILE warning on github repo - I cant run the app locally

[fluvatech]

I have been tasked to work on a website. The site was built in React and calls on most of the content from WordPress. I got the credentials to the host, WordPress, and the github repo. I tried to clone the code. The files came through but when I tried to run npm install, it crashed and I had a lot of OLD LOCKFILE warnings. I have been through the wringer on this and could really use some help. It is a pretty large site and was not put together well. I think my first approach was to update all of the dependencies. I did that but so much of the code was reliant upon the old dependencies that the site just does not render. I then tried reverting to earlier versions of Node and React, npm, all sorts of things. My question is how do I get this to where I can work on this site without the danger of breaking the whole thing. Please help.

As i said, I tried updating all of the dependencies. I have a big problem with react-router being that all of the code relies on and not . I am also getting a constant error telling me that cannot be a child of , that I need to use Route or fragment. I went through the code and have made sure that it is compliant but it still gives me the error. I also tried reverting to older Node, React, npm, and openssl versions but it just leads to more problems. I keep going down rabbit holes and killing errors one at a time but always end up with a site that isnt rendering. Just a blank white screen.

{
  "name": "project-mess",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@react-google-maps/api": "^2.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "dotenv": "^10.0.0",
    "google-map-react": "^2.1.10",
    "interweave": "^12.8.0",
    "moment": "^2.29.1",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-app-protect": "^1.0.8",
    "react-dom": "^17.0.2",
    "react-ga": "^3.3.0",
    "react-ga4": "^1.0.6",
    "react-geocode": "^0.2.3",
    "react-loader-spinner": "^4.0.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-scroll": "^1.8.3",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "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"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7"
  }
}

 

[Phro0244]

It sounds like you are dealing with a complex and messy codebase, and updating dependencies has proven to be a difficult task. Here are a few suggestions to help you get started:

1. Use a version control system: If you are not already using a version control system like Git, I highly recommend that you start using one. This will allow you to keep track of changes you make to the codebase and revert to previous versions if necessary. You mentioned that you have access to a GitHub repo, so you may want to familiarize yourself with Git commands and start using them.
2. Start with a clean slate: Instead of trying to fix the existing codebase, consider starting from scratch and building a new React app that pulls data from the WordPress site. This may seem like a daunting task, but it may be easier than trying to untangle the existing codebase. You can use tools like the WordPress REST API to fetch data from WordPress and display it in your new app.
3. Gradually update dependencies: Instead of updating all of the dependencies at once, try updating them one at a time and testing the app after each update. This will help you pinpoint which dependencies are causing issues and make it easier to roll back changes if something breaks.
4. Use a dependency management tool: Consider using a dependency management tool like Yarn to manage your dependencies. Yarn can help you avoid issues with old lockfiles by creating a yarn.lock file that ensures consistent dependency versions across different machines.
5. Consult documentation and seek help: Don't be afraid to consult documentation and seek help from the React and WordPress communities. React has extensive documentation and a large community of developers who are willing to help. Similarly, WordPress has a large community of developers and resources available online.

In terms of the specific issue you mentioned with react-router, it sounds like there may be an issue with the way the components are being rendered. Make sure that you are using the correct component (Route or Fragment) and that you are passing the correct props to them. You may also want to check the version of react-router that you are using and make sure it is compatible with your version of React.