Error: Objects are not valid as a React child

Error Blog 

This blog is about the error Error: Objects are not valid as a React child 

Problem Statement

error on start of reactjs application

Error Details 

error Log

ERROR DETAILS 

Error: Objects are not valid as a React child (found: object with keys {TASK_ID, TASK_DESC, TASK_REF, TASK_STATUS, UPDATED_ON}). If you meant to render a collection of children, use an array instead. in div (at task-list.js:22) in TaskList (at App.js:10) in div (at App.js:9) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

Error Code 

You will face this error if you try to convert an array response to json .

router.get('/', function (req, res) { Task.getAllTask(function (err, task) { console.log('controller') if (err) res.send(err); console.log('res', task); res.send( task); }); });

Solution

change the code so that the array is handled .

Code Changes 

wrap the array inside a json .

  

        

    

router.get('/', function (req, res) { Task.getAllTask(function (err, task) { console.log('controller') if (err) res.send(err); console.log('res', task); res.send({'resp':task}); }); });

         

OUTPUT

works 

Thanks for reading . Let me know your thoughts in the comments below    .

TypeError: Class extends value undefined is not a constructor or null

Error Blog 

This blog is about the error TypeError: Class extends value undefined is not a constructor or null

Problem Statement

unable to start reactjs application

Error Details 

error Log

ERROR DETAILS 

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at Module../src/task/task-list.js (task-list.js:5)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/App.js (App.css?4433:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?f3f6:45)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (task.js:11)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Error Code 

You will face this error if you have improper syntax in extends React.Component.

import React from 'react';

class TaskList extends React.Component() {

  constructor() {

    super();

    this.state = {

      name: 'React',assetName:"asset name"

    };

  }

 

  render() {

     return (

    <div  >

       Task List

    </div>

  );

  }

}

export default TaskList;

Solution

change the code so that the syntax is proper for extends  . .

Code Changes 

add the following import in your component.ts file .

  

        

     class TaskList extends React.Component  {

         

OUTPUT

works 

Thanks for reading . Let me know your thoughts in the comments below    .

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Error Blog 

This blog is about the error Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Problem Statement

unable to start node js express application

Error Details 

error Log

ERROR DETAILS 

\node_modules\mysql\lib\protocol\Parser.js:437
      throw err; // Rethrow non-MySQL errors
      ^

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:470:11)
    at ServerResponse.header (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\express\lib\response.js:771:10)
    at ServerResponse.send (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\express\lib\response.js:170:12)
    at ServerResponse.json (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\express\lib\response.js:267:15)
    at F:\ \study\gitRepo\new\learn\nodejs\expressjs\service\users.js:24:11
    at Query.<anonymous> (F:\ \study\gitRepo\new\learn\nodejs\expressjs\service\task.service.js:20:21)
    at Query.<anonymous> (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\mysql\lib\Connection.js:526:10)
    at Query._callback (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\mysql\lib\Connection.js:488:16)
    at Query.Sequence.end (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\mysql\lib\protocol\sequences\Sequence.js:83:24)
    at Query._handleFinalResultPacket (F:\ \study\gitRepo\new\learn\nodejs\expressjs\node_modules\mysql\lib\protocol\sequences\Query.js:149:8)

Error Code 

You will face this error if you res.send twice in an express js application.

var express = require('express');

var router = express.Router();

var Task = require('./task.service.js');

router.get('/', function(req, res){

   Task.getAllTask(function(err, task) {

      console.log('controller')

      if (err)

        res.send(err);

        console.log('res', task);

      res.send(task);

    });

});

router.post('/create', function(req, res){

   console.log(req.body);

   var new_task = new Task(req.body);

   console.log(new_task);

   Task.createTask(new_task, function(err, task) {

    

      if (err)

        res.send(err);

      res.json(task);

    });

   res.send('success.');

});

//export this router to use in our index.js

module.exports = router;

Solution

change the code so that res.send is not called twice . .

Code Changes 

add the following import in your component.ts file .

  

        

      if (err)

        res.send(err);

      res.json(task);

    });

  // res.send('success.');

         

OUTPUT

works 

Thanks for reading . Let me know your thoughts in the comments below    .

TypeError: app.configure is not a function

Error Blog 

Hi Guys ,

This blog is about the error TypeError: app.configure is not a function

Problem Statement

unable to start node js express application

Error Details 

error Log

ERROR DETAILS 

app.configure(function(){
    ^

TypeError: app.configure is not a function
    at Object.<anonymous> (F:\\study\gitRepo\new\learn\nodejs\expressjs\app.js:5:5)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Error Code 

You will face this error if you are using app.configure in an express js application.

var express = require('express'),

    app     = express(),

    port    = parseInt(process.env.PORT, 10) || 8080;

app.configure(function(){

  app.use(express.bodyParser());

  app.use(app.router);

});

app.listen(port);

app.post("/myRoute", function(req, res) {

  console.log(req.body);

  res.send({ status: 'SUCCESS' });

});

Solution

app.configure is removed in Express 4 and above .

Code Changes 

add the following import in your component.ts file .

  

        

var express = require('express');

var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

app.post('/api/users', function(req, res) {

   console.log(req.body);

  res.send('success');

});

app.listen(8082);

         

OUTPUT

works 

Thanks for reading . Let me know your thoughts in the comments below    .

ReferenceError: trigger is not defined

Error Blog 

Hi Guys ,

This blog is about the error ReferenceError: trigger is not defined

Problem Statement

unable to start angular application

Error Details 

error Log

ERROR DETAILS 

preview-00cf61ef72af9a6058a4b.js:1 ReferenceError: trigger is not defined
    at eval (VM506 travel.component.ts:22)
    at Object.eval (VM506 travel.component.ts:39)
    at eval (VM506 travel.component.ts:42)
    at eval (VM506 travel.component.ts:43)
    at eval (<anonymous>)
    at Qt (webcontainer.998f80711f26df414e0.js:15)
    at webcontainer.998f80711f26df414e0.js:15
    at U (webcontainer.998f80711f26df414e0.js:15)
    at webcontainer.998f80711f26df414e0.js:15
    at Object.eval (VM490 app.module.ts:15)

Error Code 

You will face this error if you are using angular animations .

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-travel',

  templateUrl: './travel.component.html',

   animations: [

   trigger('pageAnimations', [

  transition(':enter', [

    query('.inner-section, .menu-area > li', [

      style({ transform: 'translateY(-100px)', opacity: 0 }),

      stagger(50, [

        animate('300ms ease-out', style({ transform: 'none', opacity: '*' }))

      ])

    ])

  ])

])

    ],

  styleUrls: ['./travel.component.css']

})

export class TravelComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

Solution

body parser should be installed 

Code Changes 

add the following import in your component.ts file .

  

        

import {style,animate,state,keyframes,trigger , transition , query , stagger} from   '@angular/animations';

         

OUTPUT

works 

Thanks for reading . Let me know your thoughts in the comments below    .

ReferenceError: bodyParser is not defined

Error Blog 

Hi Guys ,

This blog is about the error  ReferenceError: bodyParser is not defined

Problem Statement

unable to start node js server .

Error Details 

error Log

ERROR DETAILS 

ReferenceError: bodyParser is not defined
    at Object.<anonymous> (F:\abc\study\gitRepo\new\learn\nodejs\expressjs\server.js:13:9)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Error Code 

You may have body parser in your code .

var express = require('express');

var bodyParser = require('body-parser');

var app = express();

var users = require('./service/users.js');

app.use(express.static('public'));

//app.get('/', function (req, res) {

  // res.send('Hello World');

//})

app.use('/users', users);

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

var server = app.listen(8082, function () {

   var host = server.address().address;

   var port = server.address().port;

   console.log("Example app listening at http://%s:%s", host, port)

})

Solution

body parser should be installed 

Code Changes 

execute the following command 

  

        

> npm install body-parser

         

OUTPUT

npm WARN saveError ENOENT: no such file or directory, open 'F:\abc\study\gitRepo\new\learn\nodejs\expressjs\package.json'  
npm WARN enoent ENOENT: no such file or directory, open 'F:\abc\study\gitRepo\new\learn\nodejs\expressjs\package.json'     
npm WARN expressjs No description
npm WARN expressjs No repository field.
npm WARN expressjs No README data
npm WARN expressjs No license field.

+ body-parser@1.19.0
updated 1 package and audited 316 packages in 3.986s
found 0 vulnerabilities

Thanks for reading . Let me know your thoughts in the comments below    .

ERROR 1046 (3D000): No database selected

Error Blog 

Hi Guys ,

This blog is about the error   ERROR 1046 (3D000): No database selected

Problem Statement

unable to query in mysql usiing command line client 

Error Details 

error Log

ERROR DETAILS 

mysql> select * from all_tables
    -> ;
ERROR 1046 (3D000): No database selected
mysql>

Error Code 

Please check if the database is selected 

  

   

Solution

select a database

Code Changes 

execute the following command 

  

        

mysql> use mydb
Database changed
mysql>

         

OUTPUT

Thanks for reading . Let me know your thoughts in the comments below    .