React-Router changes URL but the component doesn't render (in Dev)

[MaheshkumarSundaram]

Hi @neonexus,

In production build, this is not issue as Sails handles routing.

In dev, after successful login, the router changes the URL but the dashboard is not rendered. Only the Navbar is rendered initally. If I refresh manually, then it works.

Do you reckon why this issue might occur?

Thanks!

[neonexus]

@MaheshkumarSundaram,

It depends on which version you started your project with, but I did have this issue some time ago. I believe I fixed it using the <Suspense> React component. See: https://github.com/neonexus/sails-react-bootstrap-webpack/blob/release/assets/src/Admin/AdminRouter.jsx#L85

Essentially, what is happening is a race condition; in DEV you have a lot of extra fluff working, and React gets caught in a rendering trap. PROD assets are a lot slimmer, and more performant, so React works as intended. But in actuality, I should have been using the <Suspense> component once I updated to the new major version of React; because <Suspense> also makes slow internet connections a smoother experience. Try loading your app at slow 3G speeds.

[MaheshkumarSundaram]

Sorry, missed that. I'll try that and get back to you. Thank you.

[neonexus]

Also, I should note, there is no loading message on the login screen, it would be under the nav bar, and on initial load of the page.

[MaheshkumarSundaram]

I was actually wondering about this. the entry index.html which is built by webpack does have loading message right! Then why doesn't it appear before the login screen?

[neonexus]

I'm talking about when you click login. If you aren't seeing something like this:

On initial load while throttling your connection speed to slow 3G, then there is something wrong. I'm guessing your dependencies aren't up-to-date with the most recent release...

Have you tried a fresh, new fork of the newest release to see if it performs as intended?

[neonexus]

I'm sorry, initial-load LOADING is coming from entry_template.html.

The other LOADING is coming from the <Suspense> and should be seen after login, under the navbar.

[neonexus]

This is what I see when I throttle my connection, on a basically new install (it has new features, but those are all on the Sails side).

Screen.Recording.2023-01-11.at.12.27.28.AM.mov

[MaheshkumarSundaram]

Hi @neonexus,

Yes. I see the Loading... message when I throttle. So, the Suspense component and lazy function are working. But for some reason, it doen't render properly in normal circumstance 😕.

As a next step, I'll try a fresh install. I was reluctant to do this initially as I customized a lot in both React and Sails. But I'll try this and see whether the problem persists.

[neonexus]

You can do a fresh install next to what you've built, and just transfer over what you need to change. That would be my route.

I'm not sure why your page wouldn't load. I'm assuming you aren't getting any errors in the console?

One more thought... Are you using the <React.StrictMode> tag?

[MaheshkumarSundaram]

I don't get errors in the console.

Are you using the <React.StrictMode> tag?

Yes I am.

[neonexus]

I guess I'd have to see the code to figure it out at this point...

[neonexus]

Only thing I can think of to help track down the issue, is using console.log()'s everywhere in the React tree, something unique each time so it's easy to find, like here 1, here 2, etc, so it's easy to copy/paste. Maybe even a quick n dirty component that only does a console.log() and you just change an attribute, and return's it's children.

Past that, without being able to see the codebase, I don't know how much more I can help.

[neonexus]

Have you made any progress on this?

[MaheshkumarSundaram]

Hi @neonexus,

Apologies. I am working on something else due to priority. Could I please get back to you on this after a few days?

Thanks

[neonexus]

@MaheshkumarSundaram Of course. I just wanted to make sure you got everything working.

[neonexus]

Was there ever progress on this?

[neonexus]

@MaheshkumarSundaram can we close this? It's been open some time now, lol.

[MaheshkumarSundaram]

Sorry @neonexus. The issue is still there and but my dev has shifted towards some other major things. I haven't had time to investigate this further. In prod build, this issue doesn't occur. So, I need to look into this in my own time I guess. Apologies.

[neonexus]

Was there ever progress on this @MaheshkumarSundaram ?

[MaheshkumarSundaram]

Sorry about this. I have been ignoring this issue for quite a while as it is minor. I'll get to this. Apologies.