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.
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.
JSON:
{
"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"
}
}