Where is the Backbone error coming from?

Question

So, I am creating a basic view using Backbone, and when I go to run it, I get this TypeError:

Uncaught TypeError: Right-hand side of instanceof is not an object

The error is referencing multiple points inside the backbone.min.js file and line 18 in my program. Here is the code:

<!DOCTYPE HTML>

<HTML>
   <HEAD>
     <META CHARSET="UTF-8" />
     <TITLE>First View</TITLE>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
     <SCRIPT LANGUAGE="Javascript">
         var PokeView = Backbone.View.extend({
             render: function() {
                 this.$el.html("Simisage");

                 return this;
             }
         });

         var myPokeView = new PokeView({ el: "#paragraph" });

         console.log(myPokeView instanceof Object);
         myPokeView.render();
     </SCRIPT>
 </HEAD>
 <BODY>
     <p id="paragraph"></p>
 </BODY>

I have been looking all over the internet and some people have encountered the same error, but it isn't related to Backbone. Is the solution for Backbone the same as the others? How can I fix this?

No idea, but looking at the above code that's the only thing that can cause that error. — Benjamin Gruenbaum, Mar 25 '17 at 15:30

Emile Bergeron · Accepted Answer · 2017-10-19T14:48:51.797

Use the latest version of Backbone which at the moment is 1.3.3.
Use the non-minified version of any lib while in development. There's even a big Development Version button to download the Backbone source file.
Read the dependencies list carefully, which for version 1.0.0 of Backbone is:

Backbone's only hard dependency is Underscore.js ( >= 1.4.3). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery ( >= 1.7.0) or Zepto.

And for version 1.3.3:

Backbone's only hard dependency is Underscore.js ( >= 1.8.3). For RESTful persistence and DOM manipulation with Backbone.View, include jQuery ( >= 1.11.0), and json2.js for older Internet Explorer support. (Mimics of the Underscore and jQuery APIs, such as Lodash and Zepto, will also tend to work, with varying degrees of compatibility.)

So, in the code you shared, it looks like jQuery is missing. Just include it before the other libs and you should be ready to use Backbone.

Also, note that you're using the el option of the view with #paragraph element which doesn't exist yet in the document when executing that script snippet. To fix this, place the script tag at the bottom of the body.

<html>
<head>
    <meta charset="UTF-8" />
    <title>First View</title>
</head>
<body>
    <p id="paragraph"></p>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script>
        var PokeView = Backbone.View.extend({
            render: function() {
                this.$el.html("Simisage");
                return this;
            }
        });

        var myPokeView = new PokeView({ el: "#paragraph" });

        console.log(myPokeView instanceof Object);
        myPokeView.render();
    </script>
</body>
</html>

I didn't need the use of the latest version. But it finally works; thanks! — Obinna Nwakwue, Apr 02 '17 at 14:30

Where is the Backbone error coming from?

1 Answers1