Context is not defined on [Tutorial - Mocking Backend]

How-to Discussions
1

On the chapter- Mocking our Backend, After I split the Backend data and Homepage js, I try to get the data from backend with Context.hikes on homepage.js.

But it makes some error like this, Context is not defined.

I try to debug the problem, but I cannot find the exact error point.
I think that there is some unexpected delay on calling the data from backend… but I am not sure.

the error text and my code is below.

[Viewport]: js start on 
[Viewport]: hello - context
[Viewport]: hello this is backend
[Viewport]: backend is end
[Viewport]: {"_origin":-3,"_subscribers":[],"_isProxy":false,"_values":[]}
[Viewport]: 0
[Viewport]: back to HMPAGE
[Viewport]: null
[Viewport]: Error: ReferenceError: Context is not defined: Name: ReferenceError: Context is not defined
Error message: Uncaught ReferenceError: Context is not defined
File name: Pages/HomePage.js
Line number: 11 // I think data from backend have some delay!!

and this is my homepage. js

console.log("js start on ");
var hikes = require("Modules/Context");
console.log("back to HMPAGE");
console.log(hikes.length);
function gotoHike(arg) {
  var hike = arg.data;
  router.push("editHike",hike);
}

module.exports = {
  hikes: Context.hikes,
  gotoHike: gotoHike
};

this is context.js

console.log("hello - context");
var Observable = require("FuseJS/Observable");
var Backend = require("./Backend");

var hikes = Observable();

Backend.getHikes()
  .then(function(newHikes){
    hikes.replaceAll(newHikes);
    console.log(hikes.length);
  })
  .catch(function(error){
    console.log("the error is "+error);
  });

console.log(JSON.stringify(hikes));
console.log(hikes.length);
function updateHike(id, name, location, distance, rating, comments){
  for(var i = 0; i<hikes.length;i++){
    var hike = hikes.getAt(i);
    if(hike.id == id){
      hike.name = name;
      hike.location = location;
      hike.distance = distance;
      hike.rating = rating;
      hike.comments = comments;
      hike.replaceAt(i, hike);
      break;
    }
  }
  Backend.updateHike(id, name, location, distance, rating, comments)
    .catch(function(err){
      console.log("this is an error, "+err);
    });
}

module.exports = {
  hikes:hikes,

  updateHike:updateHike
}

and last, this is the Backend

var hikes = [
-- skip data for shorter scroll -- 
];
console.log("hello this is backend");
function getHikes(){
  return new Promise(function(resolve,reject){
    setTimeout(function(){
      resolve(hikes);
    }, 0);
  });
}

function updateHike(id, name, location, distance, rating, comments){
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      for(var i=0;i<hikes.length;i++){
        var hike = hikes[i];
        if (hike.id == id){
          hike.name =name;
          hike.location = location;
          hike.distance = distance;
          hike.rating = rating;
          hike.comments = comments;
          break;
        }
      }
      resolve();
    },0);
  });
}

console.log("backend is end");
module.exports = {
  getHikes: getHikes,
  updateHike: updateHike

};

Thanks ahead for any kind of comment

++ and this is my whole project folder

2

Hi,

your homepage.js says var hikes = require("Modules/Context");, while in module.exports you’re trying to refer to Context.

Change the line to var Context = require("Modules/Context"); and you should be good to go.