'TypeError: Cannot read properties of undefined (reading 'call') -Reactjs template
I am deploying the (connect-plus-react-free) react template project into the tomcat local server -using the command -npm run-script build So the project is building successfully but when I am trying to run the deployment file URL using http://localhost:8080/ch2/, ch2 is nothing but the folder where I am putting my all build files. At the time of running the above URL, I am getting the error of "Cannot read properties of undefined (reading 'call')" and a blank screen showing into my web. (refer to attached screenshots).
Expected Outcome:-after hitting the localhost URL, homepage should load and view pon my browser.
what i have tried :-
1.)set homepage URL (http://localhost:8080/ch2/) in index.html.(e.g.:-"homepage":"http://localhost:8080/ch2")
2.)change BrowserRouter to HashRouter in index.js.
3.)try to remove exact from Route path (E.g:- <Route path="/dashboard" component={ Dashboard } />)
4.)set homepage URL (".") in index.html.
Please suggest something so that I can proceed further.
{
"name": "connect-plus-react",
"version": "1.1.0",
"homepage":"http://localhost:8080/ch2",
"private": true,
"dependencies": {
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@mdi/font": "^4.2.95",
"@mui/material": "^5.0.0",
"@tinymce/tinymce-react": "^3.13.0",
"aws-amplify": "^4.3.14",
"bootstrap": "^4.3.1",
"bosket": "^0.2.3",
"brace": "^0.11.1",
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter,HashRouter } from 'react-router-dom';
import App from './app/App';
import "./i18n";
import * as serviceWorker from './serviceWorker';
console.log('index.js')
ReactDOM.render(
<BrowserRouter basename="/ch2">
<App/>
</BrowserRouter >
, document.getElementById('root'));
serviceWorker.unregister();
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.svgLoader {
animation: spin 0.5s linear infinite;
margin: auto;
}
.divLoader {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<meta charset="utf-8" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/Chorus_App_Bug_Favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installedddd on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Ch</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.16/tinymce.min.js" integrity="sha256-DwA/5XvQk7JerRG73GsRcEUM+ESubaliT2xRpDtIKNA=" crossorigin="anonymous"></script>
<p>Hello</p>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div class="divLoader">
<svg class="svgLoader" viewBox="0 0 100 100" width="10em" height="10em">
<path ng-attr-d="{{config.pathCmd}}" ng-attr-fill="{{config.color}}" stroke="none" d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#51CACC" transform="rotate(179.719 50 51)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 51;360 50 51" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></path>
</svg>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import './App.scss';
import AppRoutes from './AppRoutes';
import Navbar from './shared/Navbar';
import Sidebar from './shared/Sidebar';
import SettingsPanel from './shared/SettingsPanel';
import Footer from './shared/Footer';
import { withTranslation } from "react-i18next";
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
console.log('app js is here')
class App extends Component {
state = {}
componentDidMount() {
this.onRouteChanged();
}
render () {
let navbarComponent = !this.state.isFullPageLayout ? <Navbar/> : '';
let sidebarComponent = !this.state.isFullPageLayout ? <Sidebar/> : '';
let SettingsPanelComponent = !this.state.isFullPageLayout ? <SettingsPanel/> : '';
let footerComponent = !this.state.isFullPageLayout ? <Footer/> : '';
return (
<div className="container-scroller">
{ navbarComponent }
<div className="container-fluid page-body-wrapper">
{ sidebarComponent }
<div className="main-panel">
<div className="content-wrapper">
<AppRoutes/>
{ SettingsPanelComponent }
</div>
{ footerComponent }
</div>
</div>
</div>
);
}
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
this.onRouteChanged();
}
}
onRouteChanged() {
console.log("ROUTE CHANGED");
const { i18n } = this.props;
const body = document.querySelector('body');
if(this.props.location.pathname === '/layout/RtlLayout') {
body.classList.add('rtl');
i18n.changeLanguage('ar');
}
else {
body.classList.remove('rtl')
i18n.changeLanguage('en');
}
window.scrollTo(0, 0);
const fullPageLayoutRoutes = ['/user-pages/login-1', '/user-pages/login-2', '/user-pages/register-1', '/user-pages/register-2', '/user-pages/lockscreen', '/error-pages/error-404', '/error-pages/error-500', '/general-pages/landing-page'];
for ( let i = 0; i < fullPageLayoutRoutes.length; i++ ) {
if (this.props.location.pathname === fullPageLayoutRoutes[i]) {
this.setState({
isFullPageLayout: true
})
document.querySelector('.page-body-wrapper').classList.add('full-page-wrapper');
break;
} else {
this.setState({
isFullPageLayout: false
})
document.querySelector('.page-body-wrapper').classList.remove('full-page-wrapper');
}
}
}
}
export default withTranslation()(withRouter(App));
import React, { Component,Suspense, lazy } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Spinner from '../app/shared/Spinner';
const Dashboard = lazy(() => import('./dashboard/Dashboard'));
const Buttons = lazy(() => import('./basic-ui/Buttons'));
const Dropdowns = lazy(() => import('./basic-ui/Dropdowns'));
const Typography = lazy(() => import('./basic-ui/Typography'));
const BasicElements = lazy(() => import('./form-elements/BasicElements'));
const BasicTable = lazy(() => import('./tables/BasicTable'));
const Mdi = lazy(() => import('./icons/Mdi'));
const ChartJs = lazy(() => import('./charts/ChartJs'));
const Error404 = lazy(() => import('./error-pages/Error404'));
const Error500 = lazy(() => import('./error-pages/Error500'));
const Login = lazy(() => import('./user-pages/Login'));
const Register1 = lazy(() => import('./user-pages/Register'));
class AppRoutes extends Component {
render () {
return (
<Suspense fallback={<Spinner/>}>
<Switch>
<Route exact path="/dashboard" component={ Dashboard } />
<Route path="/basic-ui/buttons" component={ Buttons } />
<Route path="/basic-ui/dropdowns" component={ Dropdowns } />
<Route path="/basic-ui/typography" component={ Typography } />
<Route path="/tables/basic-table" component={ BasicTable } />
<Route path="/form-Elements/basic-elements" component={ BasicElements } />
<Route path="/icons/mdi" component={ Mdi } />
<Route path="/charts/chart-js" component={ ChartJs } />
<Route path="/user-pages/login-1" component={ Login } />
<Route path="/user-pages/register-1" component={ Register1 } />
<Route path="/error-pages/error-404" component={ Error404 } />
<Route path="/error-pages/error-500" component={ Error500 } />
<Redirect to="/dashboard" />
</Switch>
</Suspense>
);
}
}
export default AppRoutes;```
Thank you,
Vishal J
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|