Unhandled Rejection (TypeError): Cannot read property 'tags' of undefined when trying to run with local Node Express backend

[cirosantilli]

react-redux-realworld-example-app 9186292 Ubuntu 20.10, backend https://github.com/cirosantilli/node-express-realworld-example-app/tree/mongo4 (https://github.com/gothinkster/node-express-realworld-example-app + I commit to fix an incompatibility with my Mongo version), Chromium 89.

The exact same setup above worked with https://github.com/gothinkster/vue-realworld-example-app/tree/61742206c170db02b04d63c7e9d43807d8c6b902 therefore it must be some incompatibility between the backend and this frontend, is there anything else I need to set besides:

diff --git a/src/agent.js b/src/agent.js
index adfbd72..5ca1133 100644
--- a/src/agent.js
+++ b/src/agent.js
@@ -3,7 +3,7 @@ import _superagent from 'superagent';
 
 const superagent = superagentPromise(_superagent, global.Promise);
 
-const API_ROOT = 'https://conduit.productionready.io/api';
+const API_ROOT = 'http://localhost:3000/api';
 
 const encode = encodeURIComponent;
 const responseBody = res => res.body;

?

Error message on browser:

×
Unhandled Rejection (TypeError): Cannot read property 'tags' of undefined
(anonymous function)
src/reducers/articleList.js:53
  50 | return {
  51 |   ...state,
  52 |   pager: action.pager,
> 53 |   tags: action.payload[0].tags,
  54 |   articles: action.payload[1].articles,
  55 |   articlesCount: action.payload[1].articlesCount,
  56 |   currentPage: 0,
View compiled
▶ 3 stack frames were collapsed.
(anonymous function)
src/middleware.js:60
  57 |     agent.setToken(null);
  58 |   }
  59 | 
> 60 |   next(action);
  61 | };
  62 | 
  63 | function isPromise(v) {
View compiled
(anonymous function)
src/middleware.js:46
  43 |     return;
  44 |   }
  45 | 
> 46 |   next(action);
  47 | };
  48 | 
  49 | const localStorageMiddleware = store => next => action => {
View compiled
▶ 2 stack frames were collapsed.
(anonymous function)
src/middleware.js:39
  36 |     if (!action.skipTracking) {
  37 |       store.dispatch({ type: ASYNC_END, promise: action.payload });
  38 |     }
> 39 |     store.dispatch(action);
  40 |   }
  41 | );
  42 | 
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Error message on server:

UnauthorizedError: invalid signature
    at /home/ciro/git/node-express-realworld-example-app/node_modules/express-jwt/lib/index.js:100:22
    at /home/ciro/git/node-express-realworld-example-app/node_modules/express-jwt/node_modules/jsonwebtoken/index.js:155:18
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
GET /api/user 401 1.681 ms - 212
Mongoose: articles.distinct('tagList') {} {} 
GET /api/tags 304 2.866 ms - -
UnauthorizedError: invalid signature
    at /home/ciro/git/node-express-realworld-example-app/node_modules/express-jwt/lib/index.js:100:22
    at /home/ciro/git/node-express-realworld-example-app/node_modules/express-jwt/node_modules/jsonwebtoken/index.js:155:18
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
GET /api/articles/feed?limit=10&offset=0 401 2.618 ms - 212

which leads me to believe I'm missing some authentication config here.

Possibly related: #155 but that commit didn't solve the problem for me.

[cirosantilli]

Ah, I had tested other backend/frontends, and I didn't clear the browser local storage: https://superuser.com/questions/366483/how-to-delete-cookies-for-a-specific-site

After clearing storage or starting a clean browser with chromium --temp-profile it works.