I keep getting Object.create error in IE8

Question

I have an AngularJs web-app using vis.js, which is compatible with IE9+, but I'm trying to make this web-app compatible with IE8 with less features avaiable for the user, because I have to.

I included the following libraries to handle the common IE8 compatibility issues:

<!--[if lte IE 9]>
      <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
      <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
      <script type='text/javascript' src="scripts/eventShim.js"></script>
      <script>
// here I create the elements for all the custom directives
        document.createElement('custom-handler');
        document.createElement('custom-info');
        document.createElement('custom-data');
        document.createElement('custom-param');
        document.createElement('custom-rel');
        document.createElement('custom-panel');

        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
        document.createElement('ng:style');
        document.createElement('ng:class');
      </script>
    <![endif]-->

And then using bower:

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
...
<!-- endbower -->
<!-- endbuild -->

Notable versions of the libraries defined within the bower.json:

"angular": "1.2",
"jquery": "1.11.2",
"json3": "~3.3.2",
"es5-shim": "~4.1.11",
"bootstrap-sass-official": "~3.3.5",
"angular-animate": "~1.2.0",
"angular-cookies": "~1.2.0",
"angular-resource": "~1.2.0",
"angular-route": "~1.2.0",
"angular-sanitize": "~1.2.0",
"angular-touch": "~1.2.0",
"angular-bootstrap": "0.12.0",
"vis": "~3.7.2",
"string": "~3.0.0",
"components-font-awesome": "~4.4.0",
"jquery-ui": "~1.11.4"

The problem

Despite all of the above settings, when I access my web-app using IE8, I get the following error in console:

Object doesn't support this property or method        vis.min.js, line 29 character 1204

And by clicking it, the console puts the cursor at the beginning of the following line of code:

s.prototype=Object.create(o.prototype),s.prototype.redraw=function(...

The error persists even if I comment the HTML parts where vis.js is used.

I wasn't able to find a way in bower to include the vis.js library just when the web-app is opened in IE9+, so my B plan was to just get rid of the errors related to vis.js and then make unavaiable all the features in the web-app which make use of this library.

This approach could work?

If not, how can I solve this?

Answer 1

I wasn't able to find a way in bower to include the vis.js library just when the web-app is opened in IE9+

Bower could only include sources.
For such a tasks a gulp was created.
For example your building would exist with such a code:

var gulp = require('gulp')
var bowerFiles = require('main-bower-files');
var gulpFilter = require('gulp-filter');
var gulpInject = require('gulp-inject');

gulp.task('wiredep', function() {
    var ie8Files = ['**/json3.js', '**/es5shim.js'];
    // the same as: var restFiles = ['*', '!**/json3.js', '!**/es5shim.js'];
    var restFiles = ['*'].concat(ie8Files.map(function(e) { return '!' + e;}));
    gulp.src('index.html')
    .pipe(gulpInject(gulp.src(bowerFiles(), {read: false}).pipe(restFiles))
    .pipe(gulpInject(gulp.src(bowerFiles(), {read: false}).pipe(ie8Files),
                    {starttag: '<!--[if lt IE 9]>', endtag: '<![endif]-->'})
    .pipe(gulp.dest('dist'));
});

like here

Or as you said plan B:

you can write all cycles for your code like that one:

if (!Object.create) {
    Object.create = function(o, properties) {
        if (typeof o !== 'object' && typeof o !== 'function') throw new TypeError('Object prototype may only be an Object: ' + o);
        else if (o === null) throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");

        if (typeof properties != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");

        function F() {}

        F.prototype = o;

        return new F();
    };
}

like here

For my opinion you should add a gulp constructions.