search

wrappid / core

This is a Wrappid package repository that contains core functionalities of Wrappid Framework that enables users to use Wrappid's core features and components.
MIT License
10 stars 4 forks source link

bug: Maximum update depth exceeded in PageContainer.js #219

Open chirag-uemk opened 1 month ago

chirag-uemk commented 1 month ago

Describe the bug Getting the following error on screen once I've created a application from wrappid-app template and setup the project with toolkit command and start the project. Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

To Reproduce Steps to reproduce the behavior:

  1. wr init <project-name>
  2. wr setup web
  3. wr start web
  4. See error

Expected behavior The /defultAppRoute supposed to show a boilerplate default page.

Stack Trace

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
PageContainer@http://localhost:3000/static/js/bundle.js:165601:48
RenderedRoute@http://localhost:3000/static/js/bundle.js:291488:7
Routes@http://localhost:3000/static/js/bundle.js:292178:7
CoreRoutes@http://localhost:3000/static/js/bundle.js:140441:35
Router@http://localhost:3000/static/js/bundle.js:292117:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:290067:7
NativeNavigation@http://localhost:3000/static/js/bundle.js:181918:7
CoreNavigation@http://localhost:3000/static/js/bundle.js:158059:84
div
P@http://localhost:3000/static/js/bundle.js:306780:8
NativeAppDiv@http://localhost:3000/static/js/bundle.js:181225:79
CoreAppDiv@http://localhost:3000/static/js/bundle.js:156022:53
RtlProvider@http://localhost:3000/static/js/bundle.js:108644:9
ThemeProvider@http://localhost:3000/static/js/bundle.js:107453:7
ThemeProvider@http://localhost:3000/static/js/bundle.js:108935:7
ThemeProvider@http://localhost:3000/static/js/bundle.js:104695:9
NativeThemeProvider@http://localhost:3000/static/js/bundle.js:185914:39
CoreThemeProvider@http://localhost:3000/static/js/bundle.js:171173:53
CoreRoutesProvider@http://localhost:3000/static/js/bundle.js:166325:7
CoreContextProvider@http://localhost:3000/static/js/bundle.js:166524:7
StylesProvider@http://localhost:3000/static/js/bundle.js:186207:7
PersistGate@http://localhost:3000/static/js/bundle.js:303505:20
Provider@http://localhost:3000/static/js/bundle.js:287022:18
CoreProvider@http://localhost:3000/static/js/bundle.js:166642:7
WrappidSyncer@http://localhost:3000/static/js/bundle.js:186607:23
CoreAppStrictWrapper@http://localhost:3000/static/js/bundle.js:140381:7
CoreApp@http://localhost:3000/static/js/bundle.js:140327:7

Screenshots image

Desktop (please complete the following information):

Smartphone (please complete the following information): N/A

Additional context N/A

chirag-uemk commented 1 month ago

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loop.

A solution to the issue was found in changing the following line in Line 29 of PageContainer.js :

const { uid, sessionExpired, sessionDetail } = useSelector((state) => state.auth );

The code can be changed to :

const { uid, sessionExpired, sessionDetail } = useSelector((state) => state?.auth || {});

Returning an empty object when a state is not returned seems to fix the problem.

The exact auth changes can be made in the other js files :

CoreRoutes.js PageLoader.js CoreAppDiv.js AppContainerLayout.js Logout.js SplashComponent.js CoreDrawer.js DefaultAppBarContent.js CoreRoutesProvider.js CoreThemeProvider.js ReportIssueForm.js CoreFade.js