Cloneing a React project onto a new PC

Question

I have a very very basic react app that I made on my desktop and pushed to git. I am now trying to clone that repo and build it on my laptop. When I clone the repo I run npm install and when that succeeds I run yarn start only to be greeted by this:

I really have no idea what that message means. I am going to include my package.json in case you need it. Please ask for anything else you need. How can I resolve this issue?

This is my file structure btw:

Package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^4.6.0",
    "react": "^17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.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"
    ]
  }
}

Here is the repo if you'd like to try it yourself: https://github.com/ZoeyOneOhOne/React-DOH-Template

Any reason why you're using npm and yarn? You can use 'yarn install' instead of 'npm install'. I'd suggest taking a look at your webpack config file to see what loaders it is using and then cross check your package.json file to confirm that those are actually installed. — Blargian, Feb 25 '21 at 16:45
I honestly didn't know you could do yarn install lol. I will do that from now on. — ColeDOT, Feb 25 '21 at 16:57
I can't find a "webpack config file", where might that be and what might it be called? — ColeDOT, Feb 25 '21 at 16:58
I tried doing yarn install and couldn't help but notice that yarn install did not give me a package-lock.json but it did recreate the yarn.lock. Is this normal? Do I not need package-lock.json? Either way the same error occurred. — ColeDOT, Feb 25 '21 at 17:06
so Yarn and npm are just two seperate package managers. They perform the same functions and you can pick which one you want to work with. Npm just comes with Node.js. Yarn will create the yarn.lock file whereas npm will create the package-lock.json file but functionally they are the same. — Blargian, Feb 25 '21 at 17:08
@Blargian thank you very much for that info. I knew that they were both package managers, but I did not know about the package-lock and yarn lock specifics. This is very good to know. — ColeDOT, Feb 25 '21 at 17:50

score 0 · Answer 1 · answered Feb 25 '21 at 16:46

0

delete node_modules and package-lock.json or yarn.lock and then enter npm cache clean --force , npm install

Most likely the problem will be solved

answered Feb 25 '21 at 16:46

Mohammadtz

92
1
5

I deleted node_modules, package-lock.json, and yarn.lock and then ran the commands you said. Same error occurred upon running yarn start. What next? – ColeDOT Feb 25 '21 at 16:55
this way maybe work step1: `npm install --save-dev @babel/preset-env` step2: create `.babelrc` file inside root path of your project where webpack.config.js exists. then add this code to .babelrc `{"presets": ["@babel/preset-env", "@babel/preset-react"]}` – Mohammadtz Feb 25 '21 at 17:35
I do not have a webpack.config.js file. I updated the question to show you the file structure. – ColeDOT Feb 25 '21 at 17:49
follow this process: https://stackoverflow.com/a/61536062/10625740 – Mohammadtz Feb 25 '21 at 17:57
I think you have misunderstood. I do not have a webpack.config.js file. I can not complete step 4: "Step-4: create .babelrc file inside root path path of your project where webpack.config.js exists." because webpack.config.js does NOT exist. What do I do? – ColeDOT Feb 25 '21 at 18:07
if you don't have webpack.config.js, just create in the root path and then paste step5: code into it. maybe this work because I had already concluded from this method – Mohammadtz Feb 25 '21 at 18:30
Ok I did that. Same error message though. I also found webpack.config.js in react-scripts > config folder. But after following all the steps from the link you posted I got the same error message. – ColeDOT Feb 25 '21 at 18:37
I have included a link to the repo if you want to try to build it yourself. – ColeDOT Feb 25 '21 at 18:41
that's a very strange problem. what's your node version? – Mohammadtz Feb 25 '21 at 18:42
I am using node v14.15.1 – ColeDOT Feb 25 '21 at 18:45
i clone that in my system and run it, in my system without problem program, is running – Mohammadtz Feb 25 '21 at 18:47
remove your node and install again maybe the problem fixed – Mohammadtz Feb 25 '21 at 18:50
Uninstalled and reinstalled Node. Same error. – ColeDOT Feb 25 '21 at 19:10
please delete your node_modules and package-lock.json and yarn.lock and then enter `yarn` command on the console, please don't use npm i, just yarn and then enter `yarn start`, this is the way i went, and I got the result and project run – Mohammadtz Feb 25 '21 at 19:15
restart your computer maybe node server has a problem – Mohammadtz Feb 25 '21 at 19:30
I did this and still got the same error. You are the 3rd person so confirm it working. It also runs fine on my desktop. Just not my laptop. – ColeDOT Feb 25 '21 at 19:42
try clone again and follow yarn method maybe work fine What operating system is installed on the laptop? – Mohammadtz Feb 25 '21 at 20:02
I have re cloned it every time I tried. I'm using Windows 10. – ColeDOT Feb 25 '21 at 20:14
if you have another react project on your laptop, try to run that, maybe problem in your laptop windows – Mohammadtz Feb 25 '21 at 20:26
I will do that. I recently tried to create an app from scratch on this laptop and had problems. Thank you very much for the help. – ColeDOT Feb 25 '21 at 21:13

score 0 · Accepted Answer · answered Mar 03 '21 at 21:50

0

Finally solved this. There seems to be some issue with react-scripts 4.0.3. I changed this line in package.json:

"react-scripts": "4.0.3",

to

"react-scripts": "4.0.1",

and everything is working fine now.

answered Mar 03 '21 at 21:50

ColeDOT

107
1
1
9

Cloneing a React project onto a new PC

Package.json

2 Answers2