At https://gist.github.com/glasserc/be6ffc197fc961bd7f0ea3e9fee3cfd5 I have posted a stripped-down example of what I'm facing in a project at work. I have a src file which has some subclasses of Error
:
class Error1 extends Error {}
class Error2 extends Error {}
I'm using transform-builtin-extend
as well as transform-runtime
(because this is a library that uses async/await).
{
"env": {
"development": {
"plugins": [
["transform-builtin-extend", {
"globals": ["Error"]
}],
"transform-runtime",
"transform-es2015-classes",
"transform-es2015-modules-commonjs"
]
}
}
}
(Here I have removed the es2015 plugins that don't appear to be relevant to the problem.)
The compiled output for the two Error subclasses is strange in that builtins are transformed inconsistently, with the first one referring to _create
, _from
, _getPrototypeOf
, etc.:
function _extendableBuiltin(cls) {
function ExtendableBuiltin() {
var instance = (0, _construct2.default)(cls, (0, _from2.default)(arguments));
(0, _setPrototypeOf2.default)(instance, (0, _getPrototypeOf2.default)(this));
return instance;
}
ExtendableBuiltin.prototype = (0, _create2.default)(cls.prototype, {
constructor: {
value: cls,
enumerable: false,
writable: true,
configurable: true
}
});
if (_setPrototypeOf2.default) {
(0, _setPrototypeOf2.default)(ExtendableBuiltin, cls);
} else {
ExtendableBuiltin.__proto__ = cls;
}
return ExtendableBuiltin;
}
However, the second error is transformed differently, referring to _Object$create
, _Array$from
, _Object$getPrototypeOf
, etc:
function _extendableBuiltin3(cls) {
function ExtendableBuiltin() {
var instance = _Reflect$construct(cls, _Array$from(arguments));
_Object$setPrototypeOf(instance, _Object$getPrototypeOf(this));
return instance;
}
ExtendableBuiltin.prototype = _Object$create(cls.prototype, {
constructor: {
value: cls,
enumerable: false,
writable: true,
configurable: true
}
});
if (_Object$setPrototypeOf) {
_Object$setPrototypeOf(ExtendableBuiltin, cls);
} else {
ExtendableBuiltin.__proto__ = cls;
}
return ExtendableBuiltin;
}
This causes errors when I use this library in other projects, because _Object$create
is not defined anywhere.
Changing the order of transform-builtin-extend
and transform-runtime
in .babelrc does not appear to change the compiled output. Indeed, moving transform-runtime
to the end of the list also doesn't seem to change anything.
Removing transform-runtime
from .babelrc
(leaving transform-builtin-extend
and the es2015
plugins) generates _extendableBuiltin3
and _extendableBuiltin
which are identical, and use Object.create
, Array.from
, Object.getPrototypeOf
, etc.
function _extendableBuiltin(cls) {
function ExtendableBuiltin() {
var instance = Reflect.construct(cls, Array.from(arguments));
Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
return instance;
}
ExtendableBuiltin.prototype = Object.create(cls.prototype, {
constructor: {
value: cls,
enumerable: false,
writable: true,
configurable: true
}
});
if (Object.setPrototypeOf) {
Object.setPrototypeOf(ExtendableBuiltin, cls);
} else {
ExtendableBuiltin.__proto__ = cls;
}
return ExtendableBuiltin;
}
Taking this compiled output and saving it in index.js and running it through babel without transform-builtin-extend
(but leaving transform-runtime
and the es2015
plugins) seems to generate sensible output (with _create2.default
, _from2.default
, _getPrototypeOf2.default
used in call sites in both _extendableBuiltin
and _extendableBuiltin3
).
For completeness, rerunning the original index.js through Babel without transform-es2015-modules-commonjs
(but leaving transform-runtime
and transform-builtin-extend
as well as transform-es2015-classes
) also seems to generate sensible output (with _Object$create
, _Array$from
, and _Object$getPrototypeOf
being used in both functions after importing them using e.g. import _Object$create from "babel-runtime/core-js/object/create";
).
In this experiment, the _Object$create
behavior only seems to happen to the second exception subclass (even if you add other subclasses afterwards), but in my real project, it happened to both the second and the fourth.
Based on all of this, I conclude that there's some bug that arises from an interaction between transform-builtin-extend
, transform-runtime
, and the es2015
plugins, but I'm not sure how to characterize that interaction and I'm not really sure how to debug further, though. Do you have any idea what's going on?