ES6 Shim fails in Bundle #392

SebastianStehle · 2015-12-21T09:38:56Z

Hi, I created a bundle with es6-shim as first file.

Unfortunatly my app (http://mobile.green-parrot.net/) fails, because of this line of code.

3215: if (!ES.IsCallable(globals.Reflect[key])) { }

The reason is that globals.Reflect is undefined from beginning.

ljharb · 2015-12-21T17:19:42Z

@SebastianStehle i see you closed this; were you able to resolve the issue? https://github.com/paulmillr/es6-shim/blob/master/es6-shim.js#L263-L266 defines globals.Reflect in the beginning.

SebastianStehle · 2015-12-21T20:20:30Z

Partially, I referenced the es6-shim from a cdn and it works. I saw the lines of code you mentioned and I debugged through it, but it was very strange. Because globals.Reflect exists and was undefined your code didnt create a valid reference.

ljharb · 2015-12-21T22:04:57Z

Are you saying that the last published version works, but master fails?

SebastianStehle · 2015-12-22T09:41:21Z

No, it doesnt work for me when I bundle it. When I reference es6-shim.js as standalone it works.

ljharb · 2015-12-22T17:18:41Z

es6-shim is required to be run such that this is the global object, and should be the first code executed on your page (after the es5-shim). It should only be the case that it doesn't work if your bundling pipeline isn't packaging it correctly.

stroborobo · 2016-02-10T14:03:30Z

I can reproduce this, cating multiple files into one where es6-shim is the first one breaks. Shouldn't that be the same as including those files in <head> in the same order? No fancy bundling.

ljharb · 2016-02-10T16:45:07Z

@stroborobo if you are naively concatenating multiple files together without even properly separating them with semicolons, a lot of things will break, due to ASI rules. Simple cating has never been a correct or safe approach, and at this point is a very bad web dev practice. In 2016, bundling and/or a build process is simply required.

stroborobo · 2016-02-11T08:35:03Z

Hey Jordan, I'm very much aware of that :) I wasn't talking about syntax errors or similar. But you're right of course, I just wanted something quick up and running, so I could dabble with the things I was interested in right now. (Eventually use SystemJS, but well, one step at a time, still new to this modern Javascript dependency management.)

But to have that written down: it's Angular2's polyfills that declared Reflect in global space.

Thanks anyway and have a great day! :)

ljharb · 2016-02-11T08:42:49Z

@stroborobo Angular2 is big enough that I'd be willing to make a small patch to handle that case. However, https://github.com/paulmillr/es6-shim/blob/master/es6-shim.js#L264-L267 should be working with it. If you can make me a jsfiddle that reproduces the problem I'll be happy to look into it further.

stroborobo · 2016-02-11T08:51:02Z

Ok, the exact problem is this: angular2-polyfills.js has a var Reflect; in global space, which results an undefined window.Reflect. Your check !globals.Reflect is true but in defineProperty the check is actually name in object which is true, since it's declared but not defined to something evaluating to true.

If you really need a jsfiddle I'd make one, but I guess that's a fairly simple problem.

EDIT: whatever. http://tmp.kbct.de/es6-shim/

ljharb · 2016-02-11T08:58:08Z

Aha, thank you. Seems simple enough, I'll put up a fix.

ljharb · 2016-02-11T08:58:40Z

also, it would be good to file a bug report on angular for that behavior - they shouldn't be a) creating globals nor b) using names that are part of the language.

Fixes #392.

stroborobo · 2016-02-11T09:04:29Z

I'll have a look into their source code, maybe it's just the Typescript compiler outputting things that weren't intended. Thanks for adding this workaround!

SebastianStehle · 2016-02-23T10:06:42Z

Hi, thank you for your fix, I finally tried it again, but I have another exception now:

Uncaught TypeError: Cannot redefine property: Reflect

ljharb · 2016-02-23T18:06:42Z

@SebastianStehle any chance you could make me a jsfiddle that reproduces the issue?

HafizAhmedMoon · 2016-02-26T01:03:24Z

@SebastianStehle keep the angular2-polyfills at above from es6-shim

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/es6-shim/es6-shim.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

ljharb · 2016-02-26T01:07:28Z

That's not a good solution, es5-shim and es6-shim should always be first :-)

HafizAhmedMoon · 2016-02-26T01:11:26Z

But, It's working...

ljharb · 2016-02-26T01:13:46Z

lots of things "work" :-) if there's a bug in angular 2's polyfills, i'd prefer es6-shim to be robust against it if possible, and better, i'd prefer angular 2 fix their broken code.

HafizAhmedMoon · 2016-02-26T02:12:58Z

You have to change this from

var defineProperty = function (object, name, value, force) {
    if (!force && name in object) { return; }
    if (supportsDescriptors) {
      Object.defineProperty(object, name, {
        configurable: true,
        enumerable: false,
        writable: true,
        value: value
      });
    } else {
      object[name] = value;
    }
  };

to

var defineProperty = function (object, name, value, force) {
    if (!force && name in object) { return; }
    if (supportsDescriptors && Object.isExtensible(object[name])) { // because Reflect in window but undefined and non-extensible
      Object.defineProperty(object, name, {
        configurable: true,
        enumerable: false,
        writable: true,
        value: value
      });
    } else {
      object[name] = value;
    }
  };

it's working.

ljharb · 2016-02-26T07:19:32Z

@hafizahmedattari is that because angular 2's polyfill makes it non-extensible (which is a violation of the spec)?

HafizAhmedMoon · 2016-02-26T11:41:25Z

@ljharb you are right, but if you want to

es6-shim to be robust against it

you have to do like this :)

ljharb · 2016-02-26T16:45:19Z

Not necessarily - even if it's made non-extensible I can still just delete it, and copy its properties over to a new object.

ljharb · 2016-02-28T18:15:16Z

When I use https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.7/angular2-polyfills.js - I can't reproduce this whether it's included before or after es6-shim. Is there a specific browser this fails in?

HafizAhmedMoon · 2016-02-28T20:14:55Z

This error occurs after merging files into one.

ljharb · 2016-02-28T22:24:25Z

@hafizahmedattari that doesn't make any sense - short of ASI issues (the shims use a UMD so that doesn't apply) and strict mode, two script tags are identical to two concatenated files from a runtime standpoint.

HafizAhmedMoon · 2016-03-01T14:30:47Z

@ljharb I had debugged the result of globals.Reflect at Line:265 in both situations(separate files and bundle file). The result was shock, with separate files the value of globals.Reflect is object and with bundle file the value of globals.Reflect is undefined. That's why it goes to redefining Reflect, which is already defined in globals with undefined value.

ljharb · 2016-03-01T19:12:48Z

If you could provide a jsfiddle (or similar) with the bundle file that would be very helpful

SebastianStehle · 2016-03-02T12:25:29Z

I just reopened the issue, because it is not solved yet. I hope it is okay.

ljharb · 2016-03-02T16:14:40Z

Absolutely :-)

However, I will say that while I'm very curious to figure it out, the implication is that there's a flaw in your bundling process, since the files work separately - and any time bundling changes behavior it's usually a bundling bug.

cezarykluczynski · 2016-03-20T12:15:17Z

I was doing Angular2 hello world and stumbled upon this problem too, when trying to concatenate all required dependencies into one files. My solution was to wrap content of every file into self-executing anonymous function.

HafizAhmedMoon · 2016-03-30T20:01:52Z

Issue resolved in updated angular2 lib, I tried in [email protected], working without any problem.

jdelobel · 2016-04-05T11:45:41Z

Same problem with [email protected] for me (during minification process).

ljharb · 2016-04-05T15:49:03Z

@jdelobel can you make me a jsfiddle that reproduces it with the latest version of the shim?

jdelobel · 2016-04-06T09:46:11Z

@ljharb You can clone https://github.com/jdelobel/angular2-tour-of-heroes/tree/develop.
Then:

npm i
gulp dist
npm start
and you will see the error.

Browser: Chromium Version 47.0.2526.106 Built on Ubuntu 14.04, running on LinuxMint 17.3 (64-bit)

DennisDel · 2016-04-27T03:00:24Z

Same problem with latest version.
Uncaught ReferenceError: a is not defined.
Please see the attachment for problem line.

ljharb · 2016-04-27T04:20:12Z

@DennisDel This looks like a bad minification - it's changing "Map" to "a", but "a" should only be available inside the constructor. Is that the minified build, or if not, what tool are you using to produce that?

DennisDel · 2016-04-27T04:37:15Z

@ljharb I am using VS 2015 and used Google Chrome pretty print just to show you what the problem is a bit more specifically. I am not using Angularjs 2.0 btw.

ljharb · 2016-04-27T04:49:47Z

@DennisDel VS 2015 is an editor - what i meant was, are you using the minified build included in this repo, or is your app doing the minification itself?

DennisDel · 2016-04-27T04:55:09Z

@ljharb I tried minified and normal from this repo. they both have the same problem when I build them in release mode.

ljharb · 2016-04-27T05:45:16Z

@DennisDel thanks - i think you have a separate issue. would you file a new one with this information, as well as what build process you're using? (if that's something built into VS 2015, mention that too, it may have a bug)

DennisDel · 2016-04-27T05:47:16Z

Will do. Thank you.

NoMan2000 · 2016-05-18T20:28:25Z

I also encountered this. When using the ES6 Sham, (but not the ES5 Shim/Sham and ES6 Shim), whenever I minified the files using Uglifier, Safari started throwing errors.

This is the part it finds objectionable, TypeError: Attempting to change configurable attribute of unconfigurable property.

             }, set instanceof Object ? setPrototypeOf = createAndCopy : (set.__proto__ = objProto, setPrototypeOf = set instanceof Object ? function(origin, proto) {
                return origin.__proto__ = proto, origin
            } : function(origin, proto) {
                return getPrototypeOf(origin) ? (origin.__proto__ = proto, origin) : createAndCopy(origin, proto)
            })
        }
        Object.setPrototypeOf = setPrototypeOf
    }
}(), supportsDescriptors && "foo" !== function() {}.name && Object.defineProperty(Function.prototype, "name", {

It's the Object.defineProperty on "foo" !== function that it seems to take umbrage with.

ljharb · 2016-05-18T23:17:57Z

@NoMan2000 if you're using uglifier, by default it mangles function names, which is why i provide a pre-uglified es6-shim.min.js. To unbreak you, you can use the uglifier option to not do that. (Namely, the line should be }(), supportsDescriptors && "foo" !== function foo() {}.name && Object.defineProperty(Function.prototype, "name", {)

DennisDel · 2016-06-03T03:26:05Z

Hey all,
if you have similar problems, make sure you always use the minifed version and DO NOT use JsMinify to do it. I tried both normal and minified version and they always cause issues with JsMinify.

DennisDel · 2016-06-06T00:56:49Z

@ljharb Do I need any other file to include in my bundle or es6-shim.min.js alone (and of course the def file) will suffice ?

DennisDel · 2016-06-06T01:03:55Z

This is my current problem. It is on IE11

ljharb · 2016-06-06T05:09:24Z

@DennisDel this RangeError is wrapped by a function that does try/catch - I'm sure you'll find it called a in that screenshot, somewhere in the code - so I'm not sure how that error isn't being caught. Can you make a jsfiddle that reproduces it?

(es6-shim is recommended to follow es5-shim, since every browser violates ES5 in some way, but it should work just fine without it too)

ps37 · 2017-07-06T18:25:55Z

@ljharb @HafizAhmedMoon I am still getting the following error only on IE11.
SCRIPT5078: Cannot redefine non-configurable property 'Reflect'

I am bundling the es6-shim.min.js before all my sources and I am using the latest version of Angular.
Is the issue resolved?

ljharb · 2017-07-07T04:58:30Z

@ps37 Can you try including es6-shim in a separate bundle, before Angular, and make sure all script tags are either omitting or including the defer attributes, and all omitting async? (ie, so all the tags execute in order)

SebastianStehle closed this as completed Dec 21, 2015

ljharb added a commit that referenced this issue Feb 11, 2016

[Fix] ensure that a non-object globals.Reflect doesn’t break the shim.

5333255

Fixes #392.

SebastianStehle reopened this Mar 2, 2016

snyk-bot mentioned this issue Aug 30, 2019

[Snyk] Upgrade es6-shim from 0.33.13 to 0.35.5 iliutastoica/30daysofHelloWorld#5

Open

snyk-bot mentioned this issue Mar 15, 2020

[Snyk] Upgrade es6-shim from 0.33.13 to 0.35.5 JohannesFerner/angular2-master-class-workshop#4

Open

snyk-bot mentioned this issue Apr 7, 2020

[Snyk] Upgrade es6-shim from 0.34.4 to 0.35.5 rangle/ngCourse2#930

Closed

snyk-bot mentioned this issue Apr 16, 2020

[Snyk] Upgrade es6-shim from 0.34.4 to 0.35.5 vishalkdotcom/neo4j-movies-template#5

Open

hartmutobendorf mentioned this issue Jul 3, 2024

[Snyk] Upgrade es6-shim from 0.33.13 to 0.35.8 hartmutobendorf/angular2-seed#4

Open

ES6 Shim fails in Bundle #392

ES6 Shim fails in Bundle #392

Comments

SebastianStehle commented Dec 21, 2015

ljharb commented Dec 21, 2015

SebastianStehle commented Dec 21, 2015

ljharb commented Dec 21, 2015

SebastianStehle commented Dec 22, 2015

ljharb commented Dec 22, 2015

stroborobo commented Feb 10, 2016

ljharb commented Feb 10, 2016

stroborobo commented Feb 11, 2016

ljharb commented Feb 11, 2016

stroborobo commented Feb 11, 2016

ljharb commented Feb 11, 2016

ljharb commented Feb 11, 2016

stroborobo commented Feb 11, 2016

SebastianStehle commented Feb 23, 2016

ljharb commented Feb 23, 2016

HafizAhmedMoon commented Feb 26, 2016

ljharb commented Feb 26, 2016

HafizAhmedMoon commented Feb 26, 2016

ljharb commented Feb 26, 2016

HafizAhmedMoon commented Feb 26, 2016

ljharb commented Feb 26, 2016

HafizAhmedMoon commented Feb 26, 2016

ljharb commented Feb 26, 2016

ljharb commented Feb 28, 2016

HafizAhmedMoon commented Feb 28, 2016

ljharb commented Feb 28, 2016

HafizAhmedMoon commented Mar 1, 2016

ljharb commented Mar 1, 2016

SebastianStehle commented Mar 2, 2016

ljharb commented Mar 2, 2016

cezarykluczynski commented Mar 20, 2016

HafizAhmedMoon commented Mar 30, 2016

jdelobel commented Apr 5, 2016

ljharb commented Apr 5, 2016

jdelobel commented Apr 6, 2016 • edited by ljharb Loading

DennisDel commented Apr 27, 2016 • edited Loading

ljharb commented Apr 27, 2016

DennisDel commented Apr 27, 2016

ljharb commented Apr 27, 2016

DennisDel commented Apr 27, 2016

ljharb commented Apr 27, 2016

DennisDel commented Apr 27, 2016

NoMan2000 commented May 18, 2016 • edited Loading

ljharb commented May 18, 2016

DennisDel commented Jun 3, 2016

DennisDel commented Jun 6, 2016 • edited Loading

DennisDel commented Jun 6, 2016 • edited Loading

ljharb commented Jun 6, 2016

ps37 commented Jul 6, 2017 • edited Loading

ljharb commented Jul 7, 2017

jdelobel commented Apr 6, 2016 •

edited by ljharb

Loading

DennisDel commented Apr 27, 2016 •

edited

Loading

NoMan2000 commented May 18, 2016 •

edited

Loading

DennisDel commented Jun 6, 2016 •

edited

Loading

DennisDel commented Jun 6, 2016 •

edited

Loading

ps37 commented Jul 6, 2017 •

edited

Loading