-
-
Notifications
You must be signed in to change notification settings - Fork 114
Closed
Description
Hello,
After upgrading to babel@6.0.14, babelify@7.1.0 and babel-preset-es2015@ 6.0.14 it seems that on IE9, calling super() on a child class' constructor doesn't call the parent's constructor anymore.
The two classes live on different files and I import/export the whole using the ES2015 module syntax.
Like so:
// in myClassA.js
export class A {
constructor() {
console.log('I am your father');
}
init() {
console.log('And I know who your sister is');
}
}
// in myClassB.js
import {A} from './myClassA.js';
export class B extends A {
constructor() {
// Won't do anything
super();
}
init() {
// Will fire A.init() properly: 'And I know who your sister is' is logged
super.init();
}
}
// Wherever else
import {B} from './myClassB';
window.onload = () => {
var B = new B();
}
And in my gulp task:
(...).transform(babel.configure({
presets: ["es2015"],
ignore: ["client/vendor"]
}));
It's working well on IE >= 10 but unfortunately not on IE9.
I'm opening the issue on the babelify repo since I'm using it but maybe it belongs to the babel one.
Reverting back to babel@5 and babelify@6 fixes the issue.
Thanks for the support and continue the good work guys !
Activity
zertosh commentedon Nov 1, 2015
Hmm. That's def not a babelify issue. I'm surprised it works with babel@5 because of https://github.com/babel/babel.github.io/blob/862b43d/docs/advanced/caveats.md#classes-10-and-below. Try using loose mode.
mortterna commentedon Nov 24, 2015
I just stumbled on this exact issue. Super class constructor is never called with 'es2015' or 'es2015-loose' presets and with or without mentioned proto to assign plugin.
zajca commentedon Nov 25, 2015
I run into exact same issue. loose doesn't work.
I revert back to Babel5.
minimal code example: test is not printed on IE9,10 with babel6
zertosh commentedon Nov 25, 2015
This issue should be moved to Babel
karol-f commentedon Dec 3, 2015
In IE 10 I installed
babel-plugin-transform-es2015-object-super
and added it to.babelrc
:Hope it will help for IE9 too
tolpit commentedon Dec 22, 2015
Object.setPrototypeOf is undefined on IE <= 11, and babel doesn't seem to handle this case. You could use a polyfill for the moment : https://gist.github.com/edoardocavazza/47246856759f2273e48b#file-object-setprototypeof-ie9-js
miloszsobczak commentedon Jan 17, 2016
What about this issue? :(
zertosh commentedon Jan 17, 2016
For
super
calls to work in IE9, you must enable "loose" mode for the class transform. For inherited static properties to work in IE9, you must also add thebabel-plugin-transform-proto-to-assign
plugin.This is the minimal set of transforms you need to get classes with super and inheritance working in IE9:
zertosh commentedon Jan 17, 2016
Here is a fully working gist https://gist.github.com/zertosh/4f818163e4d68d58c0fa
gajus commentedon Jan 27, 2016
"Parent constructor calls not working for IE <= 10" Babel 6
jmlopez-rod commentedon Feb 24, 2016
@zertosh, thanks for the minimal set of transforms, this has gotten our project to work again in IE 9 after the update to babel 6. For reference, the previous solution was to use
spec.protoToAssign
as described in http://ricostacruz.com/til/babel-ie-class-inheritance.html.So far this fixes our issues with IE 9 and everything still seems to work, my only concern is that I cannot use the
transform-runtime
to stop the code bloating as described in https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code. Any ideas how to add this to the minimal set?jmlopez-rod commentedon Mar 12, 2016
Documenting my findings for others with similar issues. This is my current babel configuration
This will still give the same problem, but if we use the
transform-proto-to-assign
plugin we can see that it defines the following function when babel runs:which is the same function found in
babel-runtime/helpers/defaults.js
.The
inherit
function provided by thetranform-proto-to-assign
plugins checks to see ifObject.setPrototypeOf
is defined, if it isn't then it uses_defaults
. When we use thetransform-runtime
plugin we delegate theinherit
function to the one provided bybabel-runtime
which does not define the_defaults
function in caseObject.setPrototypeOf
isn't defined. Thus, if we wish to keep the same functionality while usingbabel-runtime
we can either use the polyfill provided by @tolpit https://gist.github.com/edoardocavazza/47246856759f2273e48b#file-object-setprototypeof-ie9-js , or use the one provided bybabel-runtime
:NOTE: if you want to use
typeof Object.setPrototypeOf
instead we need to usetransform-runtime
with an option:For some reason using it by itself it replaces
Object.setPrototypeOf
by some other function which does not allow it to work on IE. I'm opting by the one I specified to keep the babel plugins to a minimum.WARNING: when using the polyfill make sure to put it on its own file and then import it at the top of your main file. That is, don't use the polyfill like this:
This will make
myModule
andotherModule
execute first. Instead dowhere
myPolyfills.js
is a file containing the polyfill mentioned above.peternoordijk commentedon Apr 20, 2016
Is this still an issue? I tried to run a few tests and I didn't encounter any problems anymore on IE9. I used the es2015-loose preset without transform-proto-to-assign. My code is in here: https://jsfiddle.net/peternoordijk/ymtyud9y/
rxaviers commentedon Jun 7, 2016
Please, what's the final word on this? It seems like
super
doesn't work on <=IE10 except if usinges2015-loose
preset. Is that correct? Is that the suggested approach/workaround or is there a better solution that doesn't make use of the loose mode (e.g., inclusion of a polyfill?)? Should http://babeljs.io/docs/plugins/transform-es2015-object-super/ include a list of supported browsers? Thank youPines-Cheng commentedon Aug 14, 2016
@zertosh I have tried your solution,my part of
.babelrc
is just like this:but I meet another trouble:
Do you have any idea?
rickyblaha commentedon Aug 26, 2016
@Pines-Cheng the 3 plugins did not solve this issue for me either (using babel-core 6.13.2), but using preset
es2015-loose
did.