Search code examples
node.jsreactjsreduxes6-promisewalmart-electrode

ReduxRouterEngine Error: TypeError: Cannot read property 'then' of undefined


I'm trying to set the initial state of my electrode app with an http call to another API. I wrote getLatestProducts function that makes the http request and returns a promise that resolves when the request has data with no errors. I know that I have to return a promise from createReduxStore function but I don't know where should I resolve the promise to make this error disappear.

Electrode ReduxRouterEngine Error: TypeError: Cannot read property 'then' of undefined
    at ReduxRouterEngine._handleRender (C:\reactjs\unitest\node_modules\electrode-redux-router-engine\lib\redux-router-engine.js:119:7)
    at _matchRoute.then (C:\reactjs\unitest\node_modules\electrode-redux-router-engine\lib\redux-router-engine.js:85:21)
    at bound (domain.js:280:14)
    at runBound (domain.js:293:12)
    at runCallback (timers.js:637:20)
    at tryOnImmediate (timers.js:610:5)
    at processImmediate [as _immediateCallback] (timers.js:582:5)
From previous event:
    at ReduxRouterEngine.render (C:\reactjs\unitest\node_modules\electrode-redux-router-engine\lib\redux-router-engine.js:62:8)
    at module.exports.req (C:/reactjs/unitest/src/server/views/index-view.jsx:76:27)
    at callUserContent (C:\reactjs\unitest\node_modules\electrode-react-webapp\lib\react-webapp.js:88:17)
    at renderSSRContent (C:\reactjs\unitest\node_modules\electrode-react-webapp\lib\react-webapp.js:171:11)
    at options (C:\reactjs\unitest\node_modules\electrode-react-webapp\lib\react-webapp.js:176:12)
    at handler (C:\reactjs\unitest\node_modules\electrode-react-webapp\lib\hapi\index.js:43:13)
    at Object.internals.handler (C:\reactjs\unitest\node_modules\hapi\lib\handler.js:101:51)
    at request._protect.run (C:\reactjs\unitest\node_modules\hapi\lib\handler.js:32:23)
    at internals.Protect.run (C:\reactjs\unitest\node_modules\hapi\lib\protect.js:59:12)
    at exports.execute (C:\reactjs\unitest\node_modules\hapi\lib\handler.js:26:22)
    at each (C:\reactjs\unitest\node_modules\hapi\lib\request.js:404:16)
    at iterate (C:\reactjs\unitest\node_modules\items\lib\index.js:36:13)
    at done (C:\reactjs\unitest\node_modules\items\lib\index.js:28:25)
    at internals.Auth._authenticate (C:\reactjs\unitest\node_modules\hapi\lib\auth.js:222:16)
    at internals.Auth.authenticate (C:\reactjs\unitest\node_modules\hapi\lib\auth.js:197:17)
    at each (C:\reactjs\unitest\node_modules\hapi\lib\request.js:404:16)
    at iterate (C:\reactjs\unitest\node_modules\items\lib\index.js:36:13)
    at done (C:\reactjs\unitest\node_modules\items\lib\index.js:28:25)
    at internals.state (C:\reactjs\unitest\node_modules\hapi\lib\route.js:362:16)

My code:

import ReduxRouterEngine from "electrode-redux-router-engine";
import {routes} from "../../client/routes";
import {createStore} from "redux";
import rootReducer from "../../client/reducers";
import util from "util";
import http from "http";

const Promise = require("bluebird");
const getLatestProducts = function(count){
	const options = {
		host: "127.0.0.1",
		port: 4000,
		path: '/products/latest/'+count,
		method:'GET',
		header:{
			'Content-Type':'application/json'
		}
	};
	return new Promise((resolve, reject) => {
		http.get(options, (response) => {
			var body = "";
			var errors = "";
			response.on("data", function(chunk){
				body += chunk;
			});
			response.on("errors", function(error){
				errors = error.message;
				return reject(errors);
			});
			response.on("end", function(){
				return resolve(body);
			});
		})
	});
}
    function createReduxStore(req, match) { // eslint-disable-line
let initialState;
	getLatestProducts("12")
	.then((result) => {
		initialState = {
			latestProducts: {products:result, error:null, loading:false}
		};
		return result;
	})
	.then(() => {
		const store = createStore(rootReducer, initialState);
		return Promise.resolve(store);	
	})
	.catch((error) => {
		console.log(error);
		return Promise.reject(error);
	})
	
}

//
// This function is exported as the content for the webapp plugin.
//
// See config/default.json under plugins.webapp on specifying the content.
//
// When the Web server hits the routes handler installed by the webapp plugin, it
// will call this function to retrieve the content for SSR if it's enabled.
//
//

module.exports = (req) => {
  const app = req.server && req.server.app || req.app;
  if (!app.routesEngine) {
    app.routesEngine = new ReduxRouterEngine({routes, createReduxStore});
  }

  return app.routesEngine.render(req);
};


Solution

  • I could solve the problem. I have to return a new Promise instance and resolve/reject based on the other function results. so my code for createReduxStore may look like:

    function createReduxStore(req, match) { // eslint-disable-line
        let initialState;
        return new Promise((resolve, reject) => {
            getLatestProducts("12")
            .then((result) => {
                initialState = {
                    latestProducts: {products:result, error:null, loading:false}
                };
                const store = createStore(rootReducer, initialState);
                resolve(store);
            })
        })
        .catch((error) => {
            console.log(error);
            reject(error);
        })
    
    }