React Express TypeError: Cannot read property 'then' of undefined

Question

I'm trying to render my react app on server incase the user has disabled javascript and also for better search result. But somewhere between export and using the function, I got the TypeError: Cannot read property 'then' of undefined error.

Here are some of my code

// serverRender.js
import ReactDOMServer from 'react-dom/server';
import axios from 'axios';

const serverRender = () => {
    axios.get(`${config.serverUrl}/api/content`)
        .then(res => {
            return ReactDOMServer.renderToString(
                <App initialData={res.data.content} />
            );
        })
        .catch(console.error);
}

export default serverRender;

I then inject the code in my server.js

// server.js
import express from 'express';    
import serverRender from './serverRender';

const server = express();
server.get('/', (req, res) => {
    serverRender()
        .then(content => {
            res.render('index', {
                content
            });
        })
        .catch(console.error);
});

I also tried just

// serverRender.js
axios.get(`${config.serverUrl}/api/content`)
    .then(res => {
        console.log(
            ReactDOMServer.renderToString(
                <App initialData={res.data.content} />
            )
        );
    })
    .catch(console.error);

And I did see the rendered content on my console. Please let me know what's wrong, thanks!

p.s. full error here

TypeError: Cannot read property 'then' of undefined
    at /.../server.js:19:5
    at Layer.handle [as handle_request] (/.../node_modules/express/lib/router/layer.js:95:5)
    at next (/.../node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/.../node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/.../node_modules/express/lib/router/layer.js:95:5)
    at /.../node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/...t/node_modules/express/lib/router/index.js:335:12)
    at next (/.../node_modules/express/lib/router/index.js:275:10)
    at sass (/.../node_modules/node-sass-middleware/middleware.js:127:14)
    at Layer.handle [as handle_request] (/.../node_modules/express/lib/router/layer.js:95:5)

The error occurs in server.js, so it is `serverRender()` that is undefined. Is it correctly imported into your server.js file? — Thomas Hennes, Oct 12 '17 at 23:22

score 3 · Accepted Answer · answered Oct 12 '17 at 23:22

You need to return a promise from your serverRender function if you want it to be 'thenable'. At the moment, you're not returning anything from that function.

// serverRender.js
const serverRender = () => {
return axios.get(`${config.serverUrl}/api/content`)
    .then(res => {
        return ReactDOMServer.renderToString(
            <App initialData={res.data.content} />
        );
    })
    .catch(console.error);
}

export default serverRender;

score 2 · Answer 2 · answered Oct 12 '17 at 23:20

You are not returning a promise from your serverRender.js function. In order to call serverRender().then you must return the promise from the serverRender function. The following will work - notice the implicit return:

const serverRender = () => (
    axios.get(`${config.serverUrl}/api/content`)
    .then(res => {
        return ReactDOMServer.renderToString(
            <App initialData={res.data.content} />
        );
    })
    .catch(console.error);
);

export default serverRender;

React Express TypeError: Cannot read property 'then' of undefined

2 Answers2