React App Keep Reloading until it get crashed - reactjs

Question

I am new to react js, I created a react app, and whenever I try to open the app it continuously reloads. can anyone help me in this? i tried but unable to find out any perfect solution.
Any solution?
package.json
{
"name": "sf",
"author": "KKK Team",
"version": "0.0.1",
"private": true,
"homepage": "/sfrs",
"scripts": {
"start": "env-cmd -f .env.development react-scripts start",
"build:development": "env-cmd -f .env.development react-scripts build",
"build:nonprod": "env-cmd -f .env.nonprod react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"build": "react-scripts build",
"test": "jest --verbose",
"test:dev": "jest",
"test:watch": "jest --silent --watchAll",
"test:coverage": "jest --silent --coverage",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-table/core": "^0.2.20",
"#mui/icons-material": "^5.3.1",
"#mui/lab": "^5.0.0-alpha.66",
"#mui/material": "^5.3.1",
"#mui/styles": "^5.3.0",
"axios": "^0.25.0",
"buffer": "^6.0.3",
"clsx": "^1.1.1",
"crypto-browserify": "^3.12.0",
"env-cmd": "^10.1.0",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"msal": "^1.4.16",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.6",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"recompose": "^0.30.0",
"redux": "^4.1.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.4.1",
"stream-browserify": "^3.0.0",
"sweetalert2": "^11.4.8",
"sweetalert2-react-content": "^4.2.0",
"util": "^0.12.4",
"validator": "^13.7.0",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"husky": "^4.2.3",
"jest-canvas-mock": "^2.3.1",
"lint-staged": "^10.0.8",
"prettier": "^1.19.1",
"react-error-overlay": "^6.0.9",
"react-scripts": "4.0.3"
},
"jest": {
"setupFiles": [
"jest-canvas-mock"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "npm run test"
}
},
"lint-staged": {
"src/**/*.{js,jsx,json,css}": [
"prettier --write",
"eslint --fix"
]
},
"babel": {
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},
"resolutions": {
"react-error-overlay": "6.0.9"
}
}
I am using MUI 5. I have tried with upgrading and degrading the node version but unable to solve the issue.
app.jsx
import 'react-perfect-scrollbar/dist/css/styles.css';
import React, { useEffect } from 'react';
import { useRoutes } from 'react-router-dom';
import _ from 'lodash';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { ThemeProvider } from '#mui/material';
import AuthProvider from './components/auth_provider';
import GlobalStyles from './components/globalstyles';
import theme from './theme/theme';
import AuthenticationProgressLoader from './components/authentication_progress_loader';
import UnAuthorized from './components/unauthorized';
import routeManager from './lib/route.manager';
import Alerts from './components/c_alert';
import PageProgress from './components/c_page_progress';
import PermissionManager from './lib/permission.manager';
const App = props => {
const {
userAccount,
userPermissions,
graphProfile,
routesConfig,
alerts,
isPageLoader
} = props;
const routing = useRoutes(routesConfig || []);
useEffect(() => {
if (
!_.isEmpty(userPermissions) &&
PermissionManager.isUserMerchant() &&
_.isEmpty(routesConfig)
) {
routeManager.dispatchRoutes();
}
}, [routesConfig, userPermissions]);
return !userPermissions ||
(!_.isEmpty(userPermissions) && !PermissionManager.isUserMerchant()) ? (
<UnAuthorized />
) : (
<ThemeProvider theme={theme}>
<GlobalStyles />
{!_.isEmpty(alerts.message) && <Alerts />}
{isPageLoader && <PageProgress />}
{userAccount && graphProfile && !_.isEmpty(userPermissions) ? (
routing
) : (
<AuthenticationProgressLoader />
)}
</ThemeProvider>
);
};
App.propTypes = {
// eslint-disable-next-line react/forbid-prop-types
userAccount: PropTypes.object,
// eslint-disable-next-line react/forbid-prop-types
graphProfile: PropTypes.object,
// eslint-disable-next-line react/forbid-prop-types
userPermissions: PropTypes.object,
// eslint-disable-next-line react/forbid-prop-types
routesConfig: PropTypes.array,
// eslint-disable-next-line react/forbid-prop-types
alerts: PropTypes.object,
isPageLoader: PropTypes.bool
};
App.defaultProps = {
userAccount: {},
graphProfile: {},
userPermissions: {},
routesConfig: [],
alerts: {},
isPageLoader: false
};
function mapStatesToProps(state) {
const { userPermissions, graphProfile, userAccount } = state.auth;
const { routesConfig } = state.routes;
const { alerts } = state;
const { isPageLoader } = state.pageProgress;
return {
userPermissions,
graphProfile,
userAccount,
routesConfig,
alerts,
isPageLoader
};
}
const authApp = AuthProvider(App);
const connectedApp = connect(mapStatesToProps, null)(authApp);
// eslint-disable-next-line
export { connectedApp as App };