I am currently trying to implement an isomorphic react component in my node.js + express build. However, when I try to include the said component 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/components/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 component:
/** @jsx React.DOM */
var React = require('react/addons');
/* create factory with griddle component */
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({
componentDidMount: 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 component instance: you may have forgotten to define render
in your component or you may have accidentally tried to render an element whose type is a function that isn't a React component.
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
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.