React app taking too long to start the development server - node.js

Question

I am using a react dashboard template from themeforest. Here is the package.json content:
{
"name": "acorn-react",
"version": "1.0.1",
"private": true,
"proxy": "http://localhost:3000",
"dependencies": {
"#emoji-mart/data": "^1.0.2",
"#fullcalendar/bootstrap": "^5.9.0",
"#fullcalendar/daygrid": "^5.9.0",
"#fullcalendar/interaction": "^5.9.0",
"#fullcalendar/react": "^5.9.0",
"#fullcalendar/timegrid": "^5.9.0",
"#glidejs/glide": "^3.4.1",
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"#yaireo/tagify": "^4.12.0",
"autosuggest-trie": "^2.1.1",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"chart.js": "^3.5.1",
"chartjs-adapter-luxon": "^1.0.0",
"chartjs-plugin-crosshair": "^1.2.0",
"chartjs-plugin-datalabels": "^2.0.0",
"chartjs-plugin-streaming": "^2.0.0",
"clamp-js": "^0.7.0",
"classnames": "^2.3.1",
"date-fns": "^2.22.1",
"emoji-mart": "3.0",
"formik": "^2.2.9",
"fuse.js": "^6.4.6",
"intro.js": "^4.2.2",
"intro.js-react": "^0.5.0",
"luxon": "^2.0.1",
"overlayscrollbars": "^1.13.1",
"overlayscrollbars-react": "^0.2.3",
"pixabay-api": "^1.0.4",
"plyr-react": "^3.0.8",
"quill": "^1.3.7",
"rc-slider": "^9.7.2",
"react": "^16.13.0",
"react-autosuggest": "^10.1.0",
"react-bootstrap": "^2.0.0-rc.0",
"react-circular-progressbar": "^2.0.4",
"react-contexify": "^5.0.0",
"react-countdown": "^2.3.2",
"react-datepicker": "^4.1.1",
"react-datetime": "^3.1.1",
"react-dom": "^16.13.0",
"react-dropzone-uploader": "^2.11.0",
"react-flow-renderer": "^9.6.2",
"react-fuzzy-highlighter": "^1.0.0",
"react-helmet": "^6.1.0",
"react-hook-mousetrap": "^2.0.4",
"react-image-lightbox": "^5.1.4",
"react-intl": "^5.20.2",
"react-masonry-css": "^1.0.16",
"react-number-format": "^4.6.4",
"react-paginate": "^8.1.3",
"react-rating": "^2.0.5",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-select": "^4.3.1",
"react-simple-maps": "^3.0.0",
"react-slick": "^0.29.0",
"react-sortablejs": "^6.0.0",
"react-syntax-highlighter": "^15.4.4",
"react-table": "^7.7.0",
"react-tag-autocomplete": "^6.2.0",
"react-tenor": "^2.2.0",
"react-toastify": "^7.0.4",
"react-tooltip": "^4.2.21",
"react-world-flags": "^1.5.0",
"redux-undo": "^1.0.1",
"reduxjs-toolkit-persist": "^7.0.1",
"slick-carousel": "^1.8.1",
"sortablejs": "^1.14.0",
"web-vitals": "^0.2.4",
"yup": "^0.32.9"
},
"scripts": {
"start-js": "react-scripts start --dev",
"start-css": "sass --style=compressed --watch
src/sass/styles.scss:public/css/styles.css",
"start": "concurrently \"npm run start-js\" \"npm run start-css\"",
"build-js": "react-scripts build --prod",
"build-css": "sass --style=compressed --no-source-map
src/sass/styles.scss:public/css/styles.css",
"build": "concurrently \"npm run build-css\" \"npm run build-js\"",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint ./src/**/*.js",
"lint:fix": "eslint ./src --fix",
"precommit": "lint-staged",
"concurrently": "concurrently"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write",
"git add"
]
},
"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.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^4.1.0",
"concurrently": "^6.2.0",
"eslint": "^7.28.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"prettier": "2.3.1",
"sass": "^1.42.1"
}
}
After I run npm start, it takes about a minute or two until I see Starting the development server and localhost starts loading in browser. And then it takes about 30 minutes until the page is loaded. (Yes 30 minutes!) . I know that the list of dependency is quite long but still I expect it to start in maximum 5 minutes. I have searched a lot for similar issues and tried to apply the suggested solutions:
Allocated more memory: --max_old_space_size=4096
Updated nodejs and npm
Closed all browser tabs before starting the app
Notes:
When I ran npm install there were dependency errors, so I had to do npm install --force
I am running this on Windows 10 , my pc has 8GB of RAM.
Thanks to everyone who will help!

Answer 1

I think the problem is not with the package.json. the problem is you have something that makes it slower, which is the package prettier, the same thing happened to me, the problem was the prettier package that made my app slow by taking too much time in analyzing the format and makes the format better according to the language, so this process takes times, having too much files and prettier checks all of the file again and again, the more files you have the more time it will take. So i recommend removing prettier. You can just download a vscode extension of prettier that does the job better.