Redux dispatches the content of index.html

Question

While testing a dynamically created link TO my React app something exploded and now redux is returning the content of the index.html. I have seen this once before but forgot how I fixed it. The current setup has worked for months so I don't want to go crazy changing everything. I got around the html issue for the user login by checking for '<!doctype html>' before dispatching but then subsequent dispatches would succeed then immediately fail and also contain the contents of index.html. I created a new user and the same thing happens. I checked the database, cleared the browser data, checked the application storage in DevTools, and reset my computer. The really strange part is that the version I have on a test server is doing the same thing and it wouldn't load on another device. Here is an example of what I am seeing in React Developer Tools for state:

token:null
isAuthenticated:true
loading:false
user:"<!doctype html><html lang="en"><head><meta charset="utf-8"/> .."

If it's not my computer then how could comparing the two versions break both of them?

EDIT

Load User Action

export const loadUser = () => async dispatch => {
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  try {
    const res = await axios.get(`${API_PREFIX}/auth`);
    dispatch({
        type: USER_LOADED,
        payload: res.data
    });
  } catch (error) {
    dispatch({
        type: AUTH_ERROR,
        payload: error.message
    });
}}

Backend

router.get('/', auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select('-password');
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.send(500).json({msg: 'User error'});
  }
});

Reducer

const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: null,
    loading: true,
    user: null,
    online: null,
}

export default function(state = initialState, action) {
  const { type, payload } = action;
  switch(type){
    case USER_LOADED:
    return {
        ...state,
        isAuthenticated: true,
        loading: false,
        user: payload
    }
    case REGISTER_SUCCESS:
    case LOGIN_SUCCESS:
    console.log(`\n\n\nLOGIN PAYLOAD: ${JSON.stringify(payload)}`)
        localStorage.setItem('token', payload.token);
        return {
            ...state,
            ...payload,
            isAuthenticated: true,
            loading: false
        }
    case REGISTER_FAIL:
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case LOGOUT:
        localStorage.removeItem('token');
        return { 
            ...state,
            token: null,
            isAuthenticated: false,
            loading: false
        }
    case ONLINE:
    return{
        ...state,
        online: payload
    }
    default:
        return state;
}
}

Without some code it is really hard for us to help you. Also, I know that sometimes strange things can happen in redux if you have heavy circular dependencies somewhere — Lazar Nikolic, Dec 04 '20 at 10:24
Thank you guys for the ultra quick responses. I posted the code for getting the user. Would you suggest using madge as referenced in https://stackoverflow.com/q/48707964 to check for circular dependencies? I wasn’t tracking on CD’s prior to this so it’s definitely possible, I just think it’s strange that this late in the game I’d get that big of an issue for a route I had set up and working a while back prior to a “live” test. Also that endpoint doesn’t interact with redux (I will post it ASAP). I guess a good place to start would be the endpoint to see what it could’ve changed. — Kasey Chakos, Dec 04 '20 at 19:56

score 0 · Answer 1 · answered Dec 04 '20 at 10:27

0

Are you making a request to get the user object? I think it's just fetching a site (possibly your own) instead of getting the user object.

Please share your code for getting the user and storing it to state

answered Dec 04 '20 at 10:27

Jonathan Irwin

5,009
2
29
48

score 0 · Accepted Answer · answered Dec 31 '20 at 22:18

It turns out that the issue wasn't redux. I added the app.get('/*' ... catchall to prevent from getting "Cannot GET /route" on reload but it was before my routes which means my api calls were returning html.

Before (server.js):

const root = require('path').join(__dirname, 'client', 'build');
app.use(express.static(root));
app.get('/*', (req, res) => {
    res.sendFile('index.html', { root });
});
app.use(...);

After:

app.use(...);
...
app.get('/*', (req, res) => {
    res.sendFile('index.html', { root });
}

Redux dispatches the content of index.html

2 Answers2