Tevin Thuku Tevin Thuku - 7 months ago 87
Javascript Question

React Komposer, react and Meteor

Im Using react Komposer meteor and react .
I have this component


import React from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const lightMuiTheme = getMuiTheme(lightBaseTheme);

const Questiondetails = ({ thequestion }) => (
<MuiThemeProvider muiTheme={lightMuiTheme}>

export default Questiondetails;

And this is the container

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { composeWithTracker } from 'react-komposer';
import CircularProgress from 'material-ui/CircularProgress';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Questiondetails from '../../../ui/components/Questiondetails/Questiondetails.jsx';
import Questions from '../../Collections/Questions/Questions.js';

function composer(props, onData) {
const handle = Meteor.subscribe('singleQuestion', props._id);

if (handle.ready()) {
const thequestion = Questions.findOne({ id: props._id });
onData(null, { thequestion });

const darkMuiTheme = getMuiTheme(darkBaseTheme);

const MyLoading = () => (<div style={{ width: '90%', position: 'relative' }}>
<MuiThemeProvider muiTheme={darkMuiTheme}>
<div style={{ margin: 'auto', right: 0, left: 0, maxWidth: 200, position: 'relative' }}>
<CircularProgress size={1.0} />

export { MyLoading };

export default composeWithTracker(composer, MyLoading)(Questiondetails);

Im getting
Exception from Tracker recompute function:
debug.js:41TypeError: Cannot read property 'header' of undefined

What could I be doing.
When I look over at meteor toys. I get to see the subscription in the component.

This is my publication

import { Meteor } from 'meteor/meteor';

// import the db
import Questions from '../../../../api/Collections/Questions/Questions.js';

// the publish
Meteor.publish('singleQuestion', function(id){
return Questions.find({ _id: id });


It is likely that you don't get the data record.

Even after the subscription handle is ready, it is possible that the query returns undefined, either because there is no data in the collection or if your query is wrong.

In this case, it seems that the query is indeed wrong, leading to you passing undefined to the component instead of the expected object.

If you provide a string as the first argument to find() or findOne(), it is assumed that you mean the _id, so it prevents errors like the (common) one you made (Questions.findOne({ id: props._id }), using the id key instead of _id).

You can use the error argument in order to catch such cases more easily (and show a meaningful error message in case something is actually wrong).

I also suggest changing thequestion to simply be question or theQuestion (more readable), unless there is a very good reason not to.

function composer(props, onData) {
  const handle = Meteor.subscribe('singleQuestion', props._id);

  if (handle.ready()) {
    const question = Questions.findOne(props._id);
    let error = null;
    if (!question) {
      error = new Error('no question matches the provided id');
    onData(error, {question});