error:failed to look up view "index" in views directory

Question

local host port served an error in browser and did not load my static files. Returned an error 'Failed to lookup view "index" in views directory "C:\Users\xxxx\Desktop\contact form\views"'. Even when i create a views directory for my static file, it still returns the same error. My node js version is v14.16.0 and i use a chrome browser. Please help!

stack trace errors

Error: Failed to lookup view "index" in views directory "C:\Users\xxxx\Desktop\contact form\views"
at Function.render (C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\application.js:580:17)
at ServerResponse.render (C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\response.js:1012:7)
at C:\Users\xxxx\Desktop\contact form\server.js:22:7
at Layer.handle [as handle_request] (C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\xxxx\Desktop\contact form\node_modules\express\lib\router\index.js:275:10)

my static file is inside the public folder named "index.handlebars". my node server code is outside the public folder here is my package.json file

     {
  "name": "contact-form",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "mahnuel",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "express-handlebars": "^5.3.0",
    "nodemailer": "^6.5.0"
  }
}

my node server code is as such

const express = require('express');
const bodyParser = require('body-parser');
const exphbs = require('express-handlebars');
const path = require('path');
const nodemailer = require('nodemailer');

const app = express();

// View engine setup
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

// Static folder
app.use('/public', express.static(path.join(__dirname, 'public')));


// Body Parser Middleware
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

app.get('/', (req, res) => {
  res.render('index');
});

app.post('/send', (req, res) => {
  const output = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <ul>  
      <li>Name: ${req.body.client}</li>
      <li>Email: ${req.body.email}</li>
      
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>
  `;

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({
    host: 'site.com',
    port: 465,
    secure: true, // true for 465, false for other ports
    auth: {
        user: 'email.com', // generated ethereal user
        pass: 'password'  // generated ethereal password
    },
    tls:{
      rejectUnauthorized:false
    }
  });

  // setup email data with unicode symbols
  let mailOptions = {
      from: '"Nodemailer Contact" <email.com>', // sender address
      to: 'mail.com', // list of receivers
      subject: 'Node Contact Request', // Subject line
      text: 'Hello world?', // plain text body
      html: output // html body
  };

  // send mail with defined transport object
  transporter.sendMail(mailOptions, (error, info) => {
      if (error) {
          return console.log(error);
      }
      console.log('Message sent: %s', info.messageId);   
      console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));

      res.render('index', {msg:'Email has been sent'});
  });
  });

   
app.listen(8000, () => console.log('Server started...'));

Answer 1

I once had the same error, but in my case I had forgotten the fact that the handlebars file I wanted to render was not index but was home.hbs rather. Sooo, just check if index is the correct page you want to render and if it is indeed in the root of the views folder.