babel: Subclass does not inherit static properties in IE10 or below

When I try to call an inherited static method on an instance of a subclass (ex. sub.resolve()), the following error is thrown when using Internet Explorer 9 or 10 (works fine on IE11 and Chrome). Object doesn't support property or method 'resolve'

I’ve created a stripped down example to demonstrate the issue:

index.html

<html>
    <head>
        <title></title>
    </head>
    <body>
        Check console window
        <script src="bundle.js"></script>
    </body>
</html>

index.js

class ClassWithStatic {
  static resolve() {
    console.log('Static resolve() called successfully');
  }
}

class SubClassWithStatic extends ClassWithStatic {
}

SubClassWithStatic.resolve();

Running browserify index.js -t 6to5-browserify --outfile bundle.js creates the following bundle.js file the browser is running:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";

var _extends = function(child, parent) {
  child.prototype = Object.create(parent.prototype, {
    constructor: {
      value: child,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });

  child.__proto__ = parent;
};

var ClassWithStatic = function() {
  var ClassWithStatic = function ClassWithStatic() {};

  Object.defineProperties(ClassWithStatic, {
    resolve: {
      writable: true,

      value: function() {
        console.log('Static resolve() called successfully');
      }
    }
  });

  return ClassWithStatic;
}();

var SubClassWithStatic = function(ClassWithStatic) {
  var SubClassWithStatic = function SubClassWithStatic() {
    ClassWithStatic.apply(this, arguments);
  };

  _extends(SubClassWithStatic, ClassWithStatic);
  return SubClassWithStatic;
}(ClassWithStatic);

SubClassWithStatic.resolve();


},{}]},{},[1]);

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 17 (10 by maintainers)

Most upvoted comments

Yeah, but it’d be better than what browsers which don’t support __proto__ would be getting anyways.

jamiebuilds on Nov 3, 2014

Try this https://github.com/xfields/ie-class-inheritance-polyfill

xfields on Oct 31, 2018

6to5 now features a protoToAssign transformer that will transform all __proto__ assignments into a shallow copy. See caveats for more info.

sebmck on Jan 6, 2015

unpredictable and quirky behaviour

This is IE (mostly) we’re talking about. 😉

This is how much javascript class systems have worked in the past anyways. Off the top of my head, Backbone, Ember, and Coffeescript all work like this.

jamiebuilds on Nov 3, 2014