React application working on desktop but showing a blank page on mobile

Question

This issue has nothing to do with this post.

I built a full-stack application using create-react-app, Express, and MongoDB. As you can see, I successfully deployed it on Heroku (no errors in the log). The root ("/") page is supposed to be empty for now.

The problem arises when I try to access the application with my phone (iPhone 5s): I get this blank page, whether I am using Chrome, Firefox, or Safari:

I should be able to see the navbar, even though the page has no content. A friend of mine uses an Android phone, and he got the same result.

It doesn't seem like there's a problem with the responsiveness since I can see the navbar with Chrome's developer tools:

Any idea?

score 1 · Answer 1 · edited Nov 11 '18 at 11:02

1

I realized I was using Redux Devtools in production also. The error was caused by the fact that I was seeing the application with browsers that didn't have the extension installed.

edited Nov 11 '18 at 11:02

Zoe

27,060
21
118
148

answered Jun 21 '18 at 14:09

jsrobertouimet

103
1
9

finally, are you able to work it on your phone or not? if yes please reply how you did so. :) – GD- Ganesh Deshmukh Apr 27 '19 at 12:55
I shared the reason why it didn't work in my last comment. – jsrobertouimet Apr 28 '19 at 19:25
Yes, I got it. Because of redux Dev tools, but how to remove it from code? Without affecting other running components? – GD- Ganesh Deshmukh Apr 29 '19 at 10:02
On the client side, you can detect whether or not Node is running in development, and only then initialize Redux Devtools. – jsrobertouimet May 01 '19 at 18:12
thanks, I think now I am not further developing that project, so the need of development env, so I am going to remove Redux Devtools. or should I check first then disable redux-devtools? BTW I am also following MERN stack course from Brad traversy sir, same as you. – GD- Ganesh Deshmukh May 02 '19 at 03:41
I have removed redux-dev-tools, and then pushed to heroku but still it won't work on mobile. https://github.com/ganesh-deshmukh/connect-geeks/commit/62bcb8dfbda1d693c8e497c58ab8de8ed8727f74 – GD- Ganesh Deshmukh May 02 '19 at 04:40
I have the same issue please help me to solve it on SO, link https://stackoverflow.com/questions/55881971/mern-stack-webapp-showing-blank-screen-android-mobile-browser-as-react-redux-fr – GD- Ganesh Deshmukh May 02 '19 at 05:50

score 1 · Answer 2 · answered Mar 20 '21 at 10:18

1

I know this is an old question, but I'll post the answer in case anyone needs it.

The problem is in your server.js (Backend) file. You need to put the middlewares in server.js in the following order.

Screenshot to show the order of the middlewares

answered Mar 20 '21 at 10:18

Hashim Jameel

21
7

score 0 · Answer 3 · answered Jul 11 '22 at 23:42

As jsrobertouimet explains this is caused by seeing your app with Redux Devtools.

In my case my Store was still with Devtools

    const store = createStore(
      rootReducer, 
      compose(applyMiddleware(thunk),
      window.__REDUX_DEVTOOLS_EXTENSION__ && 
      window.__REDUX_DEVTOOLS_EXTENSION__())
    );

To solve this I just deleted Redux Devtools extension code

    const store = createStore(
      rootReducer, 
      compose(applyMiddleware(thunk))
    );

Also delete the Redux Devtools extension in your browser to see as in your phone or any other device.

React application working on desktop but showing a blank page on mobile

3 Answers3