Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Javascript errors with Firebreath plugin #3309

Closed
OlaOst opened this issue Jul 23, 2013 · 10 comments
Closed

Javascript errors with Firebreath plugin #3309

OlaOst opened this issue Jul 23, 2013 · 10 comments

Comments

@OlaOst
Copy link

OlaOst commented Jul 23, 2013

I'm having some issues with a Firebreath plugin, similar to #1931

Don't know how to reproduce without a Firebreath plugin installed, but this is the minimal HTML that reproduces on my machine:

<html>
<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>
</head>
<body ng-app>
</body>
    <object id="plugin" type="application/x-firebreath-plugin"/>
</html>

Assuming x-firebreath-plugin is installed, when inspecting the object node in Chrome (document.getElementById('plugin')), it is simply the string "TypeError".

On page load I get javascript errors from AngularJS with the following stacktrace:

TypeError: Cannot read property 'nodeName' of undefined
at nodeName_ (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:503:60)
at collectDirectives (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:4580:34)
at compileNodes (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:4496:22)
at compileNodes (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:4504:15)
at compile (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:4437:29)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:1006:11
at Object.Scope.$eval (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:8926:28)
at Object.Scope.$apply (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:9006:23)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:1004:15
at Object.invoke (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:2925:25)

The nodeName_ function should maybe check element a bit more? Or should this be handled in compileNodes or another place?

@josteink
Copy link

I can also confirm this error. It fails in Firefox as well, although somewhat differently:

Error: element[0] is undefined nodeName_@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:503
collectDirectives@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:4580
compileNodes@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:4496 
compileNodes@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:4505 
compile@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:4437 
bootstrap/resumeBootstrapInternal/</<@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:1006 
Scope.prototype.$eval@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:8926 
Scope.prototype.$apply@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:9006 
bootstrap/resumeBootstrapInternal/<@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:1004 
invoke@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:2925 
bootstrap/resumeBootstrapInternal@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:1003 
bootstrap@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:1017 
angularInit@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:977 @http://cdnjs.cloudflare.com
/ajax/libs/angular.js/1.1.5/angular.js:16872 trigger@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5
/angular.js:1812 createEventHandler/eventHandler/<@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5
/angular.js:2052 forEach@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:148 
createEventHandler/eventHandler@http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js:2051 

You can see that it's the same line-number and expression failing. (Angular.js:503)

As far as my testing goes, it only seems to affect actual Firebreath-plugins. Using the provided test-html with a the non-existant plugin-type ("application/x-firebreath-plugin") will not trigger the error.

Replacing the type for an actual Firebreath plugin and Angular immeditaly crashes on load.

@langdonx
Copy link

langdonx commented Sep 4, 2013

+1 Running into the same problem using https://code.google.com/p/fbvlc/

I get this error simply using the element inside of $rootScope (meaning an element up the hierarchy has the ng-app attribute). I think I'm going to cry if I'm not able to use Angular for this project. =.[

It can be hack-fixed by wrapping this conditional around the first case of the switch(nodeType) in collectDirectives():

  if (!isUndefined(node.nodeName)) {

My assumption is that it will prevent you tying a directive directly to your FB plugin, but you should be able to just wrap it and move on. I'll follow up if I find any other issues.

Btw, this seems to only happen in FireFox/Chrome where you have an NPAPI plugin. FireBreath seems a little broken. If you console.log(document.getElementById('plugin')), you get "TypeError", but it has a bunch of properties (just not a nodeName).

IE seems to be fine, I assume because ActiveX is a little more mature/cared for? Not sure.

Update: NPAPI plugins with FB are a little broken: http://stackoverflow.com/a/18623136/158502, and I think my fix here is probably totally safe -- if an element doesn't have a nodeName, then there's probably not much Angular can do about it anyway.

@anagelcg
Copy link

anagelcg commented Sep 6, 2013

I run into the same problem that AngularJS have problems to deal with Firebreath-Plugins.
I use AngularJS 1.2.0-rc.2 and actually there should be a fix in that version:
#1931.

But this fix does not work in Firefox and Chrome. It works in IE (10.0.9200.16660):

Chrome (29.0.1547.66 m):

TypeError: Cannot read property 'nodeName' of undefined
at nodeName_ (http://localhost:9000/bower_components/angular/angular.js:596:60)
at collectDirectives (http://localhost:9000/bower_components/angular/angular.js:4670:34)
at compileNodes (http://localhost:9000/bower_components/angular/angular.js:4586:22)
at compileNodes (http://localhost:9000/bower_components/angular/angular.js:4594:15)
at compile (http://localhost:9000/bower_components/angular/angular.js:4531:29)
at http://localhost:9000/bower_components/angular/angular.js:1157:11
at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:10034:28)
at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:10131:23)
at http://localhost:9000/bower_components/angular/angular.js:1155:15
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:3156:25)

Firefox (23.0.1):

Error: element[0] is undefined
nodeName_@http://localhost:9000/bower_components/angular/angular.js:596
collectDirectives@http://localhost:9000/bower_components/angular/angular.js:4670
compileNodes@http://localhost:9000/bower_components/angular/angular.js:4586
compileNodes@http://localhost:9000/bower_components/angular/angular.js:4595
compile@http://localhost:9000/bower_components/angular/angular.js:4531
bootstrap/doBootstrap/</<@http://localhost:9000/bower_components/angular/angular.js:1157
Scope.prototype.$eval@http://localhost:9000/bower_components/angular/angular.js:10034
Scope.prototype.$apply@http://localhost:9000/bower_components/angular/angular.js:10131
bootstrap/doBootstrap/<@http://localhost:9000/bower_components/angular/angular.js:1155
invoke@http://localhost:9000/bower_components/angular/angular.js:3156
bootstrap/doBootstrap@http://localhost:9000/bower_components/angular/angular.js:1154
bootstrap@http://localhost:9000/bower_components/angular/angular.js:1168
angularInit@http://localhost:9000/bower_components/angular/angular.js:1119
@http://localhost:9000/bower_components/angular/angular.js:18016
jQuery.Callbacks/fire@http://localhost:9000/bower_components/jquery/jquery.js:1037
jQuery.Callbacks/self.fireWith@http://localhost:9000/bower_components/jquery/jquery.js:1148
.ready@http://localhost:9000/bower_components/jquery/jquery.js:433
completed@http://localhost:9000/bower_components/jquery/jquery.js:103

http://localhost:9000/bower_components/angular/angular.js
Line 7861

The hack from langdonx works perfectly.

@robinboehm
Copy link
Contributor

/watch

@blade-runner
Copy link

in 1.2.0 it can be fixed by checking element[0] for 'undefined'. Assuming that this is plugin object.
Replace lines:

} else {
  nodeName_ = function(element) {
    return element.nodeName ? element.nodeName : element[0].nodeName;
  };

with this:

} else {
    nodeName_ = function (element) {
        return element.nodeName ? element.nodeName : !isUndefined(element[0]) ? element[0].nodeName : 'TypeError';
  };

so the nodeName_ will be 'TypeError' or whatever you like

OR
you can use directive for adding plugin object. But it worked for me only with jQuery on page, jQLite doesnt work correctly for that case.

 .directive('rtplugin', ['$compile', function($compile) {
        return {
            link: function(scope, elm, attrs) {
                var plugintmpl = '<object type="application/x-rutoken-pki" id="plugin-object" width="0" height="0"><param name="onload" value="pluginLoaded"></object>';
                var b = $compile(plugintmpl)(scope);
                elm.html(b);
            }
        };
    }])

@robinboehm
Copy link
Contributor

I don't want to monkey patch AngularJS :P - it's not a direct issue of AngularJS.
You may can extend that AngularJS with some lines to catch the TypeError for more stability in "Strange DOM Model" Situations.

But the problem is the Firebreath Plugin itself.
Other JavaScript libs e.g. KendoUI, jQuery getting Errors too when you include a FB-Plugin.

I've tried to create an issue in the projects jira ( http://jira.firebreath.org/ )
but sign up process did not work right know.
Will try this again later the day...

btw fyi:
There is a discussion about the future of NPAPI and Firebreath...

techcrunch.com/2013/09/23/say-goodbye-to-npapi/
http://stackoverflow.com/questions/18975919/future-of-firebreath-will-it-be-dead

@langdonx
Copy link

Thanks for the links @robinboehm, that's really unfortunate.

The author of FireBreath has stated on multiple occasions that he likely won't put the time/effort into fixing this problem with NPAPI... I suppose with the news of NPAPI being shuttered, that guarantees this problem won't be fixed on either end... monkey patch seems to be the only answer for now. ;)

@robinboehm
Copy link
Contributor

Ok - Issue could be closed.
It is an FireBreath Plugin Issue.

@petebacondarwin
Copy link
Contributor

Thanks @robinboehm

@orand
Copy link

orand commented Feb 19, 2014

@blade-runner Thanks for sharing your example. I was able to get your directive technique to work without jQuery by changing elm.html(b); to elm.replaceWith(b);.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

8 participants