I'm seeing this strange error. I'm writing an app which uses the graph api to retrieve event details from facebook. The event has a couple of attributes from which: - owner which is an object containing owner id, owner name, and other attributes - cover which is an object representing the event cover image details.

I save events in a mongo database, here is what my event model looks like:

const EventSchema = new Schema({
  title: String,
  name: String,
  _id: {
    type: String,
    unique: true,
    default: shortid.generate,
  },
  start_time: Date,
  end_time: Date,
  description: String,
  owner: {},
  cover: {},
  venue: {},
  privacy: String,
  timezone: String,
  location: String,
  createdAt: { type: Date, default: Date.now },
  event_type: {},
});

I have an express route which sends back a given event by id:

router.get('/:id', (req, res) => {
  Event.findById(req.params.id).exec((error, events) => {
    if (error){
      res.json(error);
    }
    res.json(events);
  })
});

My ponent architecture goes like this:

-EventPage ponent which contains an EventDetails ponent.

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import axios from 'axios';
import EventDetails from './eventDetails';

class EventPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      event: {},
    };
  }
  ponentWillMount() {
    axios.get(`/api/events/${this.props.params.id}`)
      .then((eventResponse) => {
        this.setState({
          event: eventResponse.data
        })
      }).catch((err) => {
        console.log(JSON.stringify(err));
      })
  }
  render() {
    return (
      <div className="row">
        <EventDetails event={this.state.event} />
      </div>
    )
  }
}

EventPage.propTypes = {
};

export default EventPage;




import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import _ from 'lodash';

class EventDetails extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { name, description, start_time, end_time, owner } = this.props.event;
    return(
      <div className='row'>
        <h1>{name}</h1>
        <p>{description}</p>
          <p>{JSON.stringify(this.props.event)}</p>
          <p>{this.props.event.owner}</p>
        <pre>

        </pre>


      </div>
    )
  }
}

EventDetails.propTypes = {
};

export default EventDetails;

Trying to display the event owner's name results in this error:

{"name":"Invariant Violation","framesToPop":1}

The error es from the axios error handler in the EventPage ponent.

Anyone sees what I've done wrong here?

Thanks for your help

I'm seeing this strange error. I'm writing an app which uses the graph api to retrieve event details from facebook. The event has a couple of attributes from which: - owner which is an object containing owner id, owner name, and other attributes - cover which is an object representing the event cover image details.

I save events in a mongo database, here is what my event model looks like:

const EventSchema = new Schema({
  title: String,
  name: String,
  _id: {
    type: String,
    unique: true,
    default: shortid.generate,
  },
  start_time: Date,
  end_time: Date,
  description: String,
  owner: {},
  cover: {},
  venue: {},
  privacy: String,
  timezone: String,
  location: String,
  createdAt: { type: Date, default: Date.now },
  event_type: {},
});

I have an express route which sends back a given event by id:

router.get('/:id', (req, res) => {
  Event.findById(req.params.id).exec((error, events) => {
    if (error){
      res.json(error);
    }
    res.json(events);
  })
});

My ponent architecture goes like this:

-EventPage ponent which contains an EventDetails ponent.

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import axios from 'axios';
import EventDetails from './eventDetails';

class EventPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      event: {},
    };
  }
  ponentWillMount() {
    axios.get(`/api/events/${this.props.params.id}`)
      .then((eventResponse) => {
        this.setState({
          event: eventResponse.data
        })
      }).catch((err) => {
        console.log(JSON.stringify(err));
      })
  }
  render() {
    return (
      <div className="row">
        <EventDetails event={this.state.event} />
      </div>
    )
  }
}

EventPage.propTypes = {
};

export default EventPage;




import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import _ from 'lodash';

class EventDetails extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { name, description, start_time, end_time, owner } = this.props.event;
    return(
      <div className='row'>
        <h1>{name}</h1>
        <p>{description}</p>
          <p>{JSON.stringify(this.props.event)}</p>
          <p>{this.props.event.owner}</p>
        <pre>

        </pre>


      </div>
    )
  }
}

EventDetails.propTypes = {
};

export default EventDetails;

Trying to display the event owner's name results in this error:

{"name":"Invariant Violation","framesToPop":1}

The error es from the axios error handler in the EventPage ponent.

Anyone sees what I've done wrong here?

Thanks for your help

• javascript
• mongodb
• reactjs

1 Answer 1

I had probably the same problem with {"name":"Invariant Violation","framesToPop":1}.

I've passed a javascript object instead of an array and it worked for me.

    Message.find({}).sort({'date': -1}).limit(50).exec().then( (doc, err) => {
        console.log('found');
        const messages = [];
        doc.map( (item) => {
            messages.push({data: item});
        });
        callback(err, {items: messages}); 
    });