facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.54k stars 26.79k forks source link

npm start not working for my react project #13064

Open Eben4christ opened 1 year ago

Eben4christ commented 1 year ago

I created a react project some weeks ago, now I am unable to start the project using npm start, meanwhile the project was working perfectly before now. I tried to remove the node module and re-install it back yet it wasn't working. I am tired and I don't know what to do

https://github.com/Eben4christ/stuedents-results-client-side

madangopal16072000 commented 1 year ago

check scripts section of package.json that must be like below code

"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

getsalty commented 1 year ago

How is that comment helpful?

This is what his package.json "scripts" looks like: image

Looks fine to me.

@Eben4christ There are a number of things that could be causing the issue.

  1. You are using a bunch of dead packages: image

  2. You are mixing TS and JS dependencies, which results in missing peer dependencies: image

  3. Look at the errors you are seeing: image

To explain the errors, they are saying that you do not have those packages installed in the "package.json" file.

To install a module (like "react-hot-toast") you need to run a command in the terminal: "npm i react-hot-toast". Then you package.json file should have this line: image

Finish adding your packages and it hopefully will compile/start.


With that said, I have some suggestions for you that will hopefully make you life easier. It seems like you are using a guide or something from 8 years ago. Most of the things in your package.json are way outdated and not at all used anymore.

  1. Don't use native redux - use Redux Toolkit. This is the official package by the redux team that makes it WAY easier to use redux. Look into "slices". They are the standard within the redux (and many other state managers) ecosystem.

  2. Rethink redux entirely. I use redux because I need to manage very complex state within my professional projects. But many people don't actually need such a robust state management system. Most people can get away with Jotai on smaller projects. Jotai is far easier and simpler to use/learn. I would recommend at least looking at it if this is a small project.

If you need something with more features than Jotai, but not as complex as Redux, then I would recommend Zustand.

  1. Don't use "crypto" package on the front-end. Just delete it. It was never designed for front-end use and has been incorporated into Node (back-end engine).

  2. Don't use Create React App. I would "redo" everything (copy and paste your component/ pages files) into a Vite template. Vite is actually supported and maintained - Create React App is not. To get you started, type this into a terminal: npm create vite@latest my_project -- --template react-ts .

  3. Use TypeScript. TypeScript is not a thing you really have to learn. It is more of an extension on JavaScript where most of its use is inferred. It helps a lot, so getting used to it asap can only help and make your life easier.

  4. Use the correct extensions. If you have JSX in your file, then make sure your extension is .jsx not .js . If you are using TypeScript (I would recommend that), then make sure your extension is .tsx instead of .ts.

  5. For CSS/Components either use a library of components or use a css library like Tailwind. You are already emulating Tailwind with things like: image

Just use Tailwind if you want to do things like that.

  1. Remove unused dependencies like "Formik" (I would not use Formik either way).

  2. If you are using TypeScript, replace Yup with Zod. Zod is a far better version of Yup, but its TypeScript only.

That's all I could think of off the top of my head. I am not sure exactly what you are trying to accomplish with this project, so I am reluctant to recommend any specific react frameworks. But I hope those points above help :) .