ReferenceError: is not defined

Question

After I deploy my project on Heroku, I get for the following code in Firebug this error:

ReferenceError: SirTrevor is not defined

<script type="text/javascript" charset="utf-8">
$(function(){
  var instances = $('.sir-trevor-area'),
  l = instances.length;
while (l>=2) {
 instance = $(instances[l]);
 new SirTrevor.Editor({ el: instance, blockTypes: ["Video"], defaultType: "Video" });
 l--;
};
while (l>=1) {
 instance = $(instances[l]);
 new SirTrevor.Editor({ el: instance, blockTypes: ["Embedlylink"], defaultType: "Embedlylink" });
 l--;
};
while (l>=0) {
 instance = $(instances[l]);
 new SirTrevor.Editor({ el: instance, blockTypes: ["Heading", "Text", "Image", "Video", "Embedly"], defaultType: "Text" });
 l--;
};
});
</script>

Firebug highlights this line "

new SirTrevor.Editor({ el: instance, blockTypes: ["Heading", "Text", "Image", "Video", "Embedly"], defaultType: "Text" });

"

On localhost everything seems fine, no errors. Anyone an idea what the problem could be? Thank you so much for your help! Really appreciated!

UPDATE:

SirTrevor is defined in sir-trevor.js which is successfully loaded via the Rails asset pipeline in the application.js file.

This is my application.js file:

//= require jquery
//= require jquery_ujs
//= require sir-trevor
//= require underscore.js
//= require eventable.js
//= require twitter/bootstrap
//= require jquery.sidr.js
//= require_tree .

Before push to Heroku I do "rake assets:precompile" . On localhost everything seems fine.

The application.html.erb header:

<!DOCTYPE html>
<html>
<head>
  <title>Tt</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

</head>

Well, SirTrevor is not defined. Start there. 1) from where is SirTrevor to be defined and; 2) is the resource being successfully loaded? (Use web-browser developer tools to monitor the network requests.) — user2864740
– user2864740, Commented Nov 20, 2013 at 20:55
I guess it's a external script and you didn't precompile it.See in the console if it's not loaded. — Zippie
– Zippie, Commented Nov 20, 2013 at 21:08

YvonC · Accepted Answer · 2013-11-22 03:12:43Z

2

In order to close the question a short roundup: Thanks to the help of @iamjpg I finally figured it out.

First I eliminated all the javascript from the <body> and put into separate js files. Then I adjusted the hierarchy in the application.js file. Sir-Trevor has dependencies to underscore.js and eventable.js, so they have to be higher than sir-trevor.js .

//= require jquery
//= require underscore.js
//= require eventable.js
//= require twitter/bootstrap
//= require jquery_ujs
//= require sir-trevor
//= require jquery.sidr.js
//= require_tree .

answered Nov 22, 2013 at 3:12

YvonC

3492 gold badges6 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

roizpi Over a year ago

In my situation I had the URL with CSS extension instead of a JS within the <script> tags. The editor did not warn about it...

Collectives™ on Stack Overflow

ReferenceError: is not defined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related