Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Article creation leads to "Unhandled Rejection (TypeError): Cannot read property 'slug' of undefined" on browser #57

Open
cirosantilli opened this issue Apr 2, 2021 · 0 comments

Comments

@cirosantilli
Copy link

At c1c2cc4 typeorm ormconfig.json is:

{
  "type": "mysql",
  "host": "localhost",
  "port": 3306,
  "username": "user0",
  "password": "pass0",
  "database": "nestjsrealworld",
  "entities": ["src/**/**.entity{.ts,.js}"],
  "synchronize": true
}

I manually setup that database and grant access to that user.

No errors show on server terminal throughout this reproduction. I verify that tables are created fine on MySQL so connection seems fine.

I start https://github.com/gothinkster/react-redux-realworld-example-app/tree/9186292054dc37567e707602a15a0884d6bdae35 for the frontend. I have already tested it with several backends locally and it worked fine indicating that the frontend is OK.

Then browser:

  • create a new user
  • login
  • attempt to create a new article

After clicking the submit button, I am redirected to an error page on the browser:

×
Unhandled Rejection (TypeError): Cannot read property 'slug' of undefined
(anonymous function)
src/reducers/common.js:40
  37 | case LOGOUT:
  38 |   return { ...state, redirectTo: '/', token: null, currentUser: null };
  39 | case ARTICLE_SUBMITTED:
> 40 |   const redirectUrl = `/article/${action.payload.article.slug}`;
  41 |   return { ...state, redirectTo: redirectUrl };
  42 | case SETTINGS_SAVED:
  43 |   return {
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:26
  23 |   console.log('RESULT', res);
  24 |   action.payload = res;
  25 |   store.dispatch({ type: ASYNC_END, promise: action.payload });
> 26 |   store.dispatch(action);
  27 | },
  28 | error => {
  29 |   const currentState = store.getState()
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.

If I visit the home URL / however, the article appears to have been created as it shows up on the global list.

Then if I try to view the article another error occurs:

×
TypeError: Cannot read property 'username' of undefined
Article.render
src/components/Article/index.js:39
  36 | }
  37 | 
  38 | const markup = { __html: marked(this.props.article.body, { sanitize: true }) };
> 39 | const canModify = this.props.currentUser &&
  40 |   this.props.currentUser.username === this.props.article.author.username;
  41 | return (
  42 |   <div className="article-page">
View compiled
▶ 24 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:26
  23 |   console.log('RESULT', res);
  24 |   action.payload = res;
  25 |   store.dispatch({ type: ASYNC_END, promise: action.payload });
> 26 |   store.dispatch(action);
  27 | },
  28 | error => {
  29 |   const currentState = store.getState()
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.

A DB dump:

sudo mysqldump --no-create-db --no-create-info nestjsrealworld

contains:

-- MySQL dump 10.13  Distrib 8.0.23, for Linux (x86_64)
--
-- Host: localhost    Database: nestjsrealworld
-- ------------------------------------------------------
-- Server version	8.0.23-0ubuntu0.20.10.1

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!50503 SET NAMES utf8mb4 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Dumping data for table `article`
--

LOCK TABLES `article` WRITE;
/*!40000 ALTER TABLE `article` DISABLE KEYS */;
INSERT INTO `article` VALUES (1,'asdf-xoo73o','asdf','asdf','','2021-04-02 18:47:21','2021-04-02 18:47:21','',0,1);
/*!40000 ALTER TABLE `article` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Dumping data for table `comment`
--

LOCK TABLES `comment` WRITE;
/*!40000 ALTER TABLE `comment` DISABLE KEYS */;
/*!40000 ALTER TABLE `comment` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Dumping data for table `follows`
--

LOCK TABLES `follows` WRITE;
/*!40000 ALTER TABLE `follows` DISABLE KEYS */;
/*!40000 ALTER TABLE `follows` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Dumping data for table `tag`
--

LOCK TABLES `tag` WRITE;
/*!40000 ALTER TABLE `tag` DISABLE KEYS */;
/*!40000 ALTER TABLE `tag` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Dumping data for table `user`
--

LOCK TABLES `user` WRITE;
/*!40000 ALTER TABLE `user` DISABLE KEYS */;
INSERT INTO `user` VALUES (1,'asdf','asdf@asdf.asdf','','','$argon2i$v=19$m=4096,t=3,p=1$9u5LEavGeyEakztbhrMcJA$yHR0tuYkd3xWdebZDQbISj8/055zzsdqyK6tPHqDyMY');
/*!40000 ALTER TABLE `user` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Dumping data for table `user_favorites_article`
--

LOCK TABLES `user_favorites_article` WRITE;
/*!40000 ALTER TABLE `user_favorites_article` DISABLE KEYS */;
/*!40000 ALTER TABLE `user_favorites_article` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2021-04-02 19:59:22

Ubuntu 20.10, Chromium 89.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant