Extending builtins like Error and Array doesn't work in 6.x

[jacogr]

Code

const defineError = function(name) {
  return class extends Error {
    constructor(message) {
      super();

      this.message = message;
      this.name = name;
    }
  };
};

const ErrorA = defineError('ErrorA');

console.log('new ErrorA() instanceof Error = ', new ErrorA() instanceof Error);
console.log('new ErrorA() instanceof ErrorA = ', new ErrorA() instanceof ErrorA);

Babel ^5.8.21

package.json:

{
  "name": "babel-instanceof",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node_modules/.bin/babel index.js -o compiled.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^5.8.21",
    "babel-core": "^5.8.21"
  }
}

.babelrc

{
  "stage": 1
}

output:

new ErrorA() instanceof Error =  true
new ErrorA() instanceof ErrorA =  true

^6.1.4

package.json:

{
  "name": "babel-instanceof",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node_modules/.bin/babel index.js -o compiled.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.1.4",
    "babel-cli": "^6.1.4",
    "babel-preset-es2015": "^6.1.4",
    "babel-preset-stage-1": "^6.1.4"
  }
}

.babelrc

{
  "presets": ["es2015", "stage-1"],
}

output:

new ErrorA() instanceof Error =  true
new ErrorA() instanceof ErrorA =  false

[babel-bot]

Comment originally made by @loganfsmyth on 2015-11-19T08:57:02.000Z

Extending builtin types like Array and Error was never supported in Babel 5 either, it just didn't fail in quite the same way.

---

Comment originally made by @jacogr on 2015-11-19T15:51:56.000Z

Well, yes... "unsupported" but the reality is that you only go find that out when things don't work. So in Babel 5, nobody bothered since the basic use-case did what it was supposed to.

Despite that, a regression is a regression, the behaviour has changed between the versions, you would expect a class to show as it's own instanceof despite the parent,

---

Comment originally made by @loganfsmyth on 2015-11-19T17:03:45.000Z

@jacogr

you would expect a class to show as it's own instanceof despite the parent,

Unfortunately, what the Error class constructor essentially does is this:

class Error {
    constructor(){
        // the 'this' here would be your `MyError`

        // Ignores `this` and returns an entirely new Error
        return new Error();
    }
}
class MyError extends Error {}
var e = new MyError();

It worked in Babel 5 because Babel did not support a class constructor returning a value in the spec-given way.

I do have an alternate approach for you though. Do this:

function ExtendableBuiltin(cls){
    function ExtendableBuiltin(){
        cls.apply(this, arguments);
    }
    ExtendableBuiltin.prototype = Object.create(cls.prototype);
    Object.setPrototypeOf(ExtendableBuiltin, cls);

    return ExtendableBuiltin;
}

and use that in your example as:

const defineError = function(name) {
  return class extends ExtendableBuiltin(Error) {
    constructor(message) {
      super();

      this.message = message;
      this.name = name;
    }
  };
};

---

Comment originally made by @loganfsmyth on 2015-11-19T17:05:48.000Z

I'd still not recommend extending builtins like this, but it will make the code behave like it did in Babel 5.x

---

Comment originally made by @loganfsmyth on 2016-07-08T04:37:29.000Z

Old news by now, but posting in here so people can find it. All of the logic I mention above is wrapped up and available in https://www.npmjs.com/package/babel-plugin-transform-builtin-extend as an easy-to-use package.

[xpl]

Try this as a workaround:

class DDoSProtectionError extends Error {
    constructor () {
        super ()
        // a workaround to make `instanceof DDoSProtectionError` work in ES5
        this.constructor = DDoSProtectionError 
        this.__proto__   = DDoSProtectionError.prototype
    }
}

[perekrestov-igor]

class DDoSProtectionError extends Error {
    constructor () {
        super ()
        // a workaround to make `instanceof DDoSProtectionError` work in ES5
        this.constructor = DDoSProtectionError 
        //this.__proto__   = DDoSProtectionError.prototype
    }
}
//For IE too
DDoSProtectionError.prototype = Error.prototype;

[avesus]

@xpl you saved my day! It's the only working solution.