I am currently trying to implement an isomorphic react ponent in my node.js + express build. However, when I try to include the said ponent into my jade template to render it, I get this error: TypeError: Can't add property context, object is not extensible

Here is my routes file:

var express = require('express');
var router = express.Router();


var React = require('react/addons'),
  ReactApp = React.createFactory(require('../../react/ponents/ReactApp'));

/* GET home page. */
router.get('/', function(req, res, next) {
  var reactAppEl = ReactApp();
  console.log(reactAppEl);
  var reactHtml = React.renderToString(reactAppEl);
  res.render('index', { reactOutput: reactHtml });
});

module.exports = router;

The ponent:

/** @jsx React.DOM */

var React = require('react/addons');

/* create factory with griddle ponent */
var Griddle = React.createFactory(require('griddle-react'));

var fakeData = require('../data/fakeData.js').fakeData;
var columnMeta = require('../data/columnMeta.js').columnMeta;
var resultsPerPage = 200;

var ReactApp = React.createClass({

  ponentDidMount: function () {
    console.log(fakeData);

  },
  render: function () {
    return (
      <div id="table-area">

        <Griddle results={fakeData}
                 columnMetadata={columnMeta}
                 resultsPerPage={resultsPerPage}
                 tableClassName="table"/>

      </div>
    )
  }
});

/* Module.exports instead of normal dom mounting */
module.exports = ReactApp;

Also my gulp task throws a warning saying Warning: Component(...): No render method found on the returned ponent instance: you may have forgotten to define render in your ponent or you may have accidentally tried to render an element whose type is a function that isn't a React ponent. Warning: Don't set the props property of the React element. Instead, specify the correct value when initially creating the element.

Can anyone help me? Thanks a lot

I am currently trying to implement an isomorphic react ponent in my node.js + express build. However, when I try to include the said ponent into my jade template to render it, I get this error: TypeError: Can't add property context, object is not extensible

Here is my routes file:

var express = require('express');
var router = express.Router();


var React = require('react/addons'),
  ReactApp = React.createFactory(require('../../react/ponents/ReactApp'));

/* GET home page. */
router.get('/', function(req, res, next) {
  var reactAppEl = ReactApp();
  console.log(reactAppEl);
  var reactHtml = React.renderToString(reactAppEl);
  res.render('index', { reactOutput: reactHtml });
});

module.exports = router;

The ponent:

/** @jsx React.DOM */

var React = require('react/addons');

/* create factory with griddle ponent */
var Griddle = React.createFactory(require('griddle-react'));

var fakeData = require('../data/fakeData.js').fakeData;
var columnMeta = require('../data/columnMeta.js').columnMeta;
var resultsPerPage = 200;

var ReactApp = React.createClass({

  ponentDidMount: function () {
    console.log(fakeData);

  },
  render: function () {
    return (
      <div id="table-area">

        <Griddle results={fakeData}
                 columnMetadata={columnMeta}
                 resultsPerPage={resultsPerPage}
                 tableClassName="table"/>

      </div>
    )
  }
});

/* Module.exports instead of normal dom mounting */
module.exports = ReactApp;

Also my gulp task throws a warning saying Warning: Component(...): No render method found on the returned ponent instance: you may have forgotten to define render in your ponent or you may have accidentally tried to render an element whose type is a function that isn't a React ponent. Warning: Don't set the props property of the React element. Instead, specify the correct value when initially creating the element.

Can anyone help me? Thanks a lot

• javascript
• node.js
• express
• reactjs
• isomorphic-javascript

Share Improve this question Follow edited Jul 10, 2015 at 17:40 Victor 86688 silver badges2222 bronze badges asked Jul 3, 2015 at 19:40 Uriel BertocheUriel Bertoche 88322 gold badges1414 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

By adding a react.createFactory() call around griddle-react, you signify that you are going to use plain JavaScript instead of JSX. Thus, you need to use a JavaScript function for Griddle in the subsequent render function:

return Griddle({results: fakeData,
                columnMetadata: columnMeta,
                resultsPerPage: resultsPerPage,
                tableClassName: "table"});

If you would like to use the JSX syntax that you already have, simply require griddle-react without the React.createFactory() call.