Syntax error when run through karma-webpack

[Eric Eastwood]

The latest code in master, mathiasbynens/Array.from#dc211b013ffe2e0877e4e4ea05cd652e8b7e4943 fails to run in Karma driving PhantomJS or Chrome (scripts processed through karma-webpack).

The latest release array.from@1.0.3 (doesn't rely on system.global) works just fine.

Here is a barebones project that demonstrates the issue, https://github.com/MadLittleMods/system-global-phantomjs-test

npm run karma

> system-global-phantomjs-test@1.0.0 karma C:\Users\MLM\Libraries\Code\javascript\system-global-phantomjs-test
> karma start karma.config.js --single-run

(node:16968) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
21 02 2017 01:20:56.576:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
21 02 2017 01:20:56.578:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
21 02 2017 01:20:56.624:INFO [launcher]: Starting browser PhantomJS
21 02 2017 01:20:59.527:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket A_2Jk42DEvtvVrOYAAAA with id 14696421
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  SyntaxError: Unexpected token '.'
  at webpack:///~/array.from/~/system.global/shim.js:22:0 <- src/entry2.js:9629

The sourcemap line numbers appear to be a bit off and looking at node_modules\system.global\shim.js (22 lines total) doesn't show anything out of the ordinary.

This doesn't appear to be just a system.global issue on it's own because using system.global directly (see entry1.js in the project), doesn't throw the error.

entry2.js fails in Karma PhantomJS/Chrome. note: does work just fine in node v6.7.0, node src/entry2.js

[Jordan Harband]

There's definitely not a syntax error in the system.global module.

It might be because Webpack shims System - it would be really helpful if you could supply the webpack build output for src/entry2.js - specifically, what's on line 9629?

[Eric Eastwood]

@ljharb entry2.karma-webpack-build.js

entry2.karma-webpack-build.js:9629 Uncaught SyntaxError: Unexpected token .

entry2.karma-webpack-build.js annotated snippet

module.exports = function shimSystemAndGlobal() {
	var polyfill = getPolyfill();
	define(
		polyfill,
		{ System: {} },
		{ System: function () { return "object" !== 'object'; } }
	);
	if ({}.global !== polyfill) {
		if (define.supportsDescriptors) {
			Object.defineProperty({}, 'global', {
				configurable: true,
				enumerable: false,
				value: polyfill,
				writable: false
			});
		} else {
------->		{}.global = polyfill;
		}
	}
	return polyfill;
};

[Jordan Harband]

That is definitely a syntax error, but as you can see here that's not what's in the code.

It looks like webpack has a bug and is replacing System with an empty object literal. I'd file this with them - that line should absolutely be System.global = polyfill;

[Eric Eastwood]

Thanks @ljharb, I'll look for/create an issue on the webpack repo(will link it).

For reference, this is what that area of code looks like in entry1.js when we use system.global directly and works fine

entry1.karma-webpack-build.js

module.exports = function shimGlobal() {
	var polyfill = getPolyfill();
	if (define.supportsDescriptors) {
		var descriptor = Object.getOwnPropertyDescriptor(polyfill, 'global');
		if (!descriptor || (descriptor.configurable && (descriptor.enumerable || descriptor.writable || global !== polyfill))) {
			Object.defineProperty(polyfill, 'global', {
				configurable: true,
				enumerable: false,
				value: polyfill,
				writable: false
			});
		}
	} else if (typeof global !== 'object' || global !== polyfill) {
		polyfill.global = polyfill;
	}
	return polyfill;
};

[Jordan Harband]

There's one thing to note - the code when you use it directly is different than the original code. In other words, it's a different version of the system.global package.

[Jordan Harband]

Specifically, the older version is what webpack is tripping up on; the newer version seems to work. If you downgrade your standalone test's version i suspect you'll see the same error.

[Eric Eastwood]

@ljharb Great spot 🎯 system.global@1.0.0 causing the same issues in entry1.js as you suspected.

So we need to bump system.global in array.from 👍

Seems like the webpack bug is still valid unless they have some docs around System

[Jordan Harband]

Definitely still a webpack bug, and worth fixing.

[Jordan Harband]

Fixed by removing the dependency entirely.

Please do file and link the webpack bug; it's pretty important that that get fixed ASAP.

[Eric Eastwood]

Webpack bug created webpack/webpack#4329

cc @ljharb