Nuxt.js: Using Nuxt as a middleware : TypeError: Cannot read property 'renderer' of undefined

[VincentLoy]

Hello there, I'm trying to create a really basic app using Nuxt as a middleware and I got an issue when I try to access the server.
Here is the complete error message:
The message appear both in the browser and the terminal

TypeError: Cannot read property 'renderer' of undefined
   at render (/home/vincent/WebstormProjects/nuxtExpress/node_modules/nuxt/lib/nuxt.js:94:14)
   at Layer.handle [as handle_request] (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/layer.js:95:5)
   at trim_prefix (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:312:13)
   at /home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:280:7
   at Function.process_params (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:330:12)
   at next (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:271:10)
   at expressInit (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/middleware/init.js:33:5)
   at Layer.handle [as handle_request] (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/layer.js:95:5)
   at trim_prefix (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:312:13)
   at /home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:280:7

The check in the render function in lib/nuxt.js fails because this is actually undefined.

// nuxt.js
render (req, res) {
    if (!this.renderer) { // <--- Here this is undefined
      setTimeout(() => {
        this.render(req, res)
      }, 1000)
      return
    }
    // ...

This may be caused by my code? I'm probably doing something wrong in this file.

// app.js (at project's root)
const express = require('express');
const app = express();
const Nuxt = require('nuxt');
const nuxtConfig = require('./config/nuxt.config');

new Nuxt(nuxtConfig).then((nuxt) => {
    app.use(nuxt.render);

    app.listen(3000, function () {
        console.log('listening port 3000 -> http://localhost:3000');
    });
}).catch((error) => {
    console.log(error);
});

// config/nuxt.config.js (from project's root)
module.exports = {
    build: {
        vendor: ['axios']
    }
};

<!-- pages/index.vue -->
<template>
    <div>
        <div>this is template body</div>
        <p class="ita">loaded from {{ req }}</p>
    </div>
</template>
<style>
    body{
        background-color: #f9f9f9;
        text-align: center;
    }

    p.ita {
        padding: 10px;
        font-style: italic;
    }
</style>


md5-da6a085e92fe754b7ffe13dbfb145e35

Thanks, and keep up the good work! :+1:

_{This bug report is available on Nuxt.js community (#c15)}

[VincentLoy]

I solved the problem by binding the render function :+1:

const express = require('express');
const app = express();
const Nuxt = require('nuxt');
const nuxtConfig = require('./config/nuxt.config');

new Nuxt(nuxtConfig).then((nuxt) => {
    let render = nuxt.render;
    app.use(render.bind(nuxt));

    app.listen(3000, function () {
        console.log('listening port 3000 -> http://localhost:3000')
    });
}).catch((error) => {
    console.log(error);
});

[Atinux]

Hi @VincentLoy , thank you for reporting this issue!

You don't have to bind the render function anymore with the last release v0.7.7

You should now be able to do:

app.use(nuxt.render)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.