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>
<script>
export default{
data({ req }){
return{
msg:'hello vue',
req: req ? 'server' : 'client'
}
}
}
</script>
Thanks, and keep up the good work! :+1:
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This bug report is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c15">#c15</a>)</em></sub></div>