javascript - Cannot read property '__reactAutoBindMap' of undefined -
for last week i've been @ loss how set server side rendering react. new project it's express server , i'm attempting render super simple hello world react app uses react-router-component..
i think best way me share code have right , i'm hoping can please tell me i'm doing wrong! i've followed tutorial after tutorial , tried sorts of different things keep getting error after error!
this app.js express server, relevant code * route if scroll down bit:
require('node-jsx').install({extension: '.jsx'}); var react = require('react'); var app = require('./src/app.jsx'); var request = require('superagent'); var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieparser = require('cookie-parser'); var bodyparser = require('body-parser'); var url = require('url'); //database , passport requires var mongoose = require('mongoose'); var passport = require('passport'); var localstrategy = require('passport-local'); // var api = require('./routes/api'); var app = express(); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); // uncomment after placing favicon in /public //app.use(favicon(__dirname + '/public/favicon.ico')); app.use(logger('dev')); app.use(bodyparser.json()); app.use(bodyparser.urlencoded({ extended: false })); app.use(cookieparser()); app.use(require('express-session')({ secret: 'secret', resave: false, saveuninitialized: false })); app.use(passport.initialize()); app.use(passport.session()); app.use(express.static(path.join(__dirname, 'public'))); //passport config var account = require('./models/account'); passport.use(new localstrategy(account.authenticate())); passport.serializeuser(account.serializeuser()); passport.deserializeuser(account.deserializeuser()); //mongoose mongoose.connect('mongodb://localhost/database'); //this relevant section renders react , sends client app.get('*', function(req, res, next){ var path = url.parse(req.url).pathname; react.rendertostring( react.createfactory(app({path : path})), function(err, markup) { res.send('<!doctype html>' + markup); } ); }); // catch 404 , forward error handler app.use(function(req, res, next) { var err = new error('not found'); err.status = 404; next(err); }); // error handlers // development error handler // print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; the app.jsx file being required in app.js file:
/** * @jsx react.dom */ var react = require('react'); var router = require('react-router-component'); var locations = router.locations; var location = router.location; var index = require('./components/index.jsx'); var app = react.createclass({ render: function() { return ( <html> <head lang="en"> <meta charset="utf-8"/> <title>react app</title> </head> <body> <div id="main"> <locations path={this.props.path}> <location path="/" handler={index} /> </locations> </div> <script type="text/javascript" src="./javascripts/bundle.js"></script> </body> </html> ) } }); module.exports = app; and index.jsx file required in app.jsx:
var react = require('react'); var index = react.createclass({ render: function() { return ( <div classname="test"> <span>whats going on</span> </div> ) } }); module.exports = index; i'm showing recent attempt @ getting work here rest assured i've tried different methods render react component, such rendercomponenttostring, i've tried react.rendertostring(react.createelement(app)) etc etc..
but keep getting error "cannot read property '__reactautobindmap' of undefined"
please help!!! :) thanks
i have same problem. had:
react.render(apptag(config), node); where apptag require() jsx file. , generate me "cannot read property '__reactautobindmap' of undefined"
i try few things, solved problem:
react.render(react.createelement(apptag, config), node); i hope helpful
i tried more things, works:
react.render(react.createfactory(apptag)(config), node)
Comments
Post a Comment