Chapter 7 - Handlebars.compile is confused with partials.weather and weather.handlebars

[9andresc]

I notice that the inclusion of the partial {{> weather}} in the home.handlebars file is getting confused between the name of the widget weather.handlebars and the partial variable located in res.locals.partials.weather because a saw this error on my browser:

Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed [object Object] at Object.compile...

So, I decided to replace res.locals.partials.weather with res.locals.partials.weatherData. Finally, the weather.handlebars file will look like this:

<div class="weatherWidget">
  {{#each partials.weatherData.locations}}
    <div class="location">
      <h3>{{name}}</h3>
      <a href="{{forecastUrl}}">
        <img src="{{iconUrl}}" alt="{{weather}}">
        {{weather}}, {{temp}}
      </a>
    </div>
  {{/each}}
  <small>
    Source: <a href="http://www.wunderground.com">Weather Underground</a>
  </small>
</div>

These changes worked well for me. Hope it helps.

[9andresc]

This is my meadowlark.js file, I did it a little bit different from the original

// NPM MODULES
var express = require('express');

// NODE MODULES
var fortune = require('./lib/fortune.js');

// EXPRESS INITIATION
var app = express();

// RESPONSE'S HEADER CONFIGURATION
// Disable sensitive information server
app.disable('x-powered-by');

// STATIC RESOURCES
app.use(express.static(__dirname + '/public'));

// ENGINES
// Set up handlebars view engine
var handlebars = require('express-handlebars').create({defaultLayout: 'main'});
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

// PORT CONFIGURATION
app.set('port', process.env.PORT || 3000);

// FUNCTIONS
// Function to return weather data
function getWeatherData() {
  return {
    locations: [
      {
        name: 'Portland',
        forecastUrl: 'http://www.wunderground.com/US/OR/Portland.html',
        iconUrl: 'http://icons-ak.wxug.com/i/c/k/cloudy.gif',
        weather: 'Overcast',
        temp: '54.1 F (12.3 C)'
      },
      {
        name: 'Bend',
        forecastUrl: 'http://www.wunderground.com/US/OR/Bend.html',
        iconUrl: 'http://icons-ak.wxug.com/i/c/k/partlycloudy.gif',
        weather: 'Partly Cloudy',
        temp: '55.0 F (12.8 C)'
      },
      {
        name: 'Manzanita',
        forecastUrl: 'http://www.wunderground.com/US/OR/Manzanita.html',
        iconUrl: 'http://icons-ak.wxug.com/i/c/k/rain.gif',
        weather: 'Light Rain',
        temp: '55.0 F (12.8 C)'
      }
    ]
  };
}

// MIDDLEWARE
// Middleware to inject data into res.locals.partials
app.use(function (request, response, next) {
  if (!response.locals.partials) response.locals.partials = {};
  response.locals.partials.weatherData = getWeatherData();
  next();
});

// Middleware to enable page testing
app.use(function (request, response, next) {
  response.locals.showTests = app.get('env') !== 'production' && request.query.test === '1';
  next();
});

// ROUTES
app.get('/', function (request, response) {
  response.render('home');
});

app.get('/about', function (request, response) {
  response.render('about', {
    fortune: fortune.getFortune(),
    pageTestScript: '/qa/tests_about.js'
  });
});

app.get('/tours/hood-river', function (request, response) {
  response.render('tours/hood_river');
});

app.get('/tours/oregon-coast', function (request, response) {
  response.render('tours/oregon_coast');
});

app.get('/tours/request-group-rate', function (request, response) {
  response.render('tours/request_group_rate');
});

// ERROR HANDLING
// Custom 404 page
app.use(function (request, response) {
  response.status(404);
  response.render('404');
});

// Custom 500 page
app.use(function (error, request, response) {
  console.error(error.stack);
  response.status(500);
  response.render('500');
});

// SERVER CONFIGURATION
app.listen(app.get('port'), function () {
  console.log('Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.');
});

[jcfiala]

I've run into the same problem, and changing the name of the data to weatherData also fixed it.

[EthanRBrown]

This is a known problem resulting from changes in the express-handlebars package. The book has been updated (reprint pending), and I will be refactoring the whole repo to reflect these changes very soon.

[edrpls]

Hi, I got the book from O'Reilly, is that version going to be updated soon?

[GerardKetuma]

I think the issue is due to the fact that the weather information has been namespaced under partials like

res.locals.partials.weather

Renaming the namespace from partials to something else will also fix the problem. The namespace 'partials' must be conflicting with the express-handlebars library.

I changed my code to the following and it worked.

app.use(function(req, res, next){
  if(!res.locals.partialsData) res.locals.partialsData = {};
  res.locals.partialsData.weather = getWeatherData();
  next();
});

Also don't forget to change partials to partialsData in the weather.handlebars template.

[EthanRBrown]

As previously mentioned, this is a problem that was caused by the 1.0 update of express-handlebars. It's been fixed in the repository; both the master branch and the latest version (1.5.1) function correctly.

[EthanRBrown]

@Ikhos it has been updated

[kilgarenone]

@gustavoandrescabral thank you for posting this!

[beiweiqiang]

@gustavoandrescabral thanks, fix my bug 👍

[satyambnsal]

as this is my first experience with node and express. i was stuck with that handlebar problem, big thanks for helping me out

[DanStockham]

I've tried the fixes and I'm still having the issue with "Error: The partial weather could not be found"

I've updated the calls using weatherContext, partialsContext, and some of the suggestions of the OP. I even updated the version of express-handlebars and copied the code from the repo.

[EthanRBrown]

Hi, @DanStockham, I just ran the code from the companion repo, and it works fine. Can you paste your package.json file, and tell us what OS you're on?

I'm currently working on a 2nd edition of this book, and LOTS has changed in the 2-plus years this book has been on the shelves. The 2nd edition is a pretty massive overhaul.

[DanStockham]

Here is a snippet of package.json. I'm also using Ubuntu 16.04.

{
  "name": "meadowlark.js",
  "version": "0.0.1",
  "description": "a tutorial project I am doing",
  "main": "meadowlark.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Daniel Stockham",
  "license": "ISC",
  "dependencies": {
    "express": "~4.4.2",
    "express-handlebars": "~1.1.0"
  },
  "devDependencies": {
    "chai": "^3.5.0",
    "dotenv": "^4.0.0",
    "grunt": "^0.4.1",
    "grunt-cafe-mocha": "^0.1.13",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-exec": "^1.0.1",
    "mocha": "^3.2.0",
    "zombie": "^5.0.5"
  }
}

[simplist88]

I'm also facing same issue in Window OS. Is there any clue of this issue?

"Error: The partial weather could not be found"

[EthanRBrown]

Hi, @DanStockham and @simplist88,

I'm afraid I was not able to reproduce your problem in either Linux or Windows...and I switched to the exact version of express-handlebars that you're using. So here are some things to check:

• Are you using the right extension? Make sure when you initialize express-handlebars, you are using the same extension (extname) as you are. In other words, if you have app.engine('.handlebars', require('express-handlebars')({ extname: '.handlebars' }), make sure your file is called weather.handlebars (not weather.hbs or something...of course you're free to use the .hbs extension if that's your thing, but you'll have to use that in the configuration instead)
• Are you using app.set('views', 'some/path') to tell Express/Handlebars to look for views in a custom location, you'll have to explicitly configure partialsDir
• Are you using partialsDir to specify an explicit location for your partials? If so, make sure weather.handlebars exists there
• If you are using app.set('views', 'some/path') or partialsDir, are you using relative or absolute paths? If you're using relative paths, are you sure they're working correctly? You might want to try using path.resolve(__dirname, ...) to make sure you're specifying the directory you think you're specifying.
• When you pass the weather data context to the view, make sure you call it something other than just weather. That's what the original version of the book did, and that used to work (when I first wrote the book), but at some point, express-handlebars provided that as a way to specify dynamics templates. So instead of setting res.locals.partials.weather (or res.render('whatever', { partials: { weather: { /* weather data */ } })), use a different name, like res.locals.partials.weatherContext or res.locals.partials.weatherData

I hope this helps!

[ghost]

problem fixed. Thanks very much