babel: [Bug]: subclassing seems broken in older Chrome

💻

  • Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

(function (cb) {
	class Foo extends HTMLElement {
		connectedCallback() {
			this._baz = 'hello';
		}

		baz() {
			return this._baz;
		}
	}

	class Fooz extends Foo {
		connectedCallback() {
			super.connectedCallback();

			this._baz = this._baz + ' world';
		}
	}

	customElements.define('web-test-fooz', Fooz);
	document.body.appendChild(new Fooz());
	var fooz = document.getElementsByTagName('web-test-fooz')[0];

	cb(fooz.baz() === 'hello world');
})(callback);

Configuration file name

No response

Configuration

https://github.com/mrhenry/web-tests/blob/main/webpack-core-web.config.js#L166-L217

use: {
	loader: 'babel-loader',
	options: {
		comments: false,
		presets: [
			[
				'@babel/preset-env',
				{
					corejs: '^3.6.3',
					bugfixes: true,
					targets: {
						browsers: [
							"IE >= 8",
							"Opera >= 12",
							"Safari >= 5.1",
							"Chrome >= 15",
							"Edge >= 12",
							"Firefox >= 4"
						]
					},
					useBuiltIns: 'usage',
					exclude: [
						"web.dom-collections.iterator",
						"web.dom-collections.for-each"
					]
				}
			]
		]
	}
}

Current and expected behavior

Current :

Uncaught TypeError: Cannot call a class as a function

In function _classCallCheck

Screenshot 2021-12-15 at 14 38 07

Expected subclasses to work.

Environment

Started occurring after upgrading @babel/core from 7.16.0 to 7.16.5

Possible solution

No response

Additional context

Test results page : https://mrhenry.github.io/web-tests/#53d613d8-773c-43d5-800b-a78aeeab8ef7

Screenshot 2021-12-15 at 14 40 49

Results for chrome <=36 dropped below 1.0 indicating that the test is now failing. The only change between tests passing and tests failing is this commit : https://github.com/mrhenry/web-tests/commit/16599fd5bd5716d24c63d9dbed57ca63408796c9

(build outputs are included in git)

Test source code : https://github.com/mrhenry/web-tests/blob/main/specifications/whatwg/html/4.13.4.customElements.define.super/test.pure.js

Git blame for the affected build output :

https://github.com/mrhenry/web-tests/blame/main/specifications/whatwg/html/4.13.4.customElements.define.super/test.babel.js

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 2
  • Comments: 35 (21 by maintainers)

Commits related to this issue

Most upvoted comments

@nicolo-ribaudo the fix is in es5-shim v4.6.3.

@ljharb are you sure that the current descriptor is writable and you will be able properly check it (for example https://bugs.chromium.org/p/v8/issues/detail?id=1570)?

Yes, since Object.defineProperty is an ES5 feature.

whatwg html 4.13.4 customElements.define super - chrome/27.0 - core-web - delta : 0.010 - current : 0.020

tc39 ecma262 15.7 Class-Definitions.ClassHeritage - chrome/35.0 - babel - delta : 0.010 - current : 0.040

tc39 ecma262 15.7 Class-Definitions.ClassHeritage - chrome/35.0 - core-web - delta : 0.010 - current : 0.040

whatwg html 4.13.4 customElements.define super - chrome/35.0 - core-web - delta : 0.010 - current : 0.040

tc39 ecma262 15.7 Class-Definitions.ClassHeritage - chrome/16.0 - babel - delta : 0.010 - current : 0.040

tc39 ecma262 15.7 Class-Definitions.ClassHeritage - chrome/16.0 - core-web - delta : 0.010 - current : 0.030

whatwg html 4.13.4 customElements.define super - chrome/16.0 - core-web - delta : 0.010 - current : 0.030

ecma262 15.7 Class-Definitions.ClassHeritage - chrome/34.0 - babel - delta : 0.010 - current : 0.030

tc39 ecma262 15.7 Class-Definitions.ClassHeritage - chrome/34.0 - core-web - delta : 0.010 - current : 0.030

whatwg html 4.13.4 customElements.define super - chrome/34.0 - core-web - delta : 0.010 - current : 0.030

Looks promising, haven’t spotted negative delta’s (no new failures)

Running now with these changes : https://github.com/mrhenry/web-tests/pull/263/files

this will take a while

Thanks! I figured out how to test old chrome, I’ll work on this later today.

Uncaught TypeError: Cannot redefine property: prototype

My change based on your comment :

https://github.com/mrhenry/web-tests/pull/260/files