bug: Maximum update depth exceeded in PageContainer.js

[chirag-uemk]

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

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser: Mozilla 125.0
• Version: @wrappid/core 0.0.469

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

Additional context N/A

[chirag-uemk]

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