{"id":19180,"library":"babel-plugin-transform-builtin-classes","title":"babel-plugin-transform-builtin-classes","description":"Babel plugin (v0.6.1) that fixes extending built-in classes like Array, Error, HTMLElement, etc., which are notoriously broken in transpiled ES2015 classes. It patches the prototype chain so that instances created via `new MySubclass()` properly inherit from the subclass and its constructor. Requires `babel-plugin-transform-es2015-classes` as a prerequisite. Key differentiator: handles multiple globals, has a `logIfPatched` option, and works with Rollup (inverted plugin order). No known active development; last release was in 2017. Compatible with IE11+ and uses `Object.setPrototypeOf` or `__proto__` as fallback.","status":"maintenance","version":"0.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/WebReflection/babel-plugin-transform-builtin-classes","tags":["javascript","babel","babel-plugin","es6","classes","native","custom","elements","fixed"],"install":[{"cmd":"npm install babel-plugin-transform-builtin-classes","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-builtin-classes","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-builtin-classes","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This plugin transforms class syntax and must be applied before or after this builtin-classes plugin depending on the bundler (Babel order: builtin-classes before es2015-classes for Rollup).","package":"babel-plugin-transform-es2015-classes","optional":true}],"imports":[{"note":"This is a Babel plugin, not a runtime import. It's used in .babelrc or programmatically as a plugin entry.","wrong":"import transformBuiltinClasses from 'babel-plugin-transform-builtin-classes'","symbol":"default (plugin)","correct":"module.exports = { plugins: [[\"babel-plugin-transform-builtin-classes\", { globals: [\"Array\"] }]] }"},{"note":"Option key is 'globals', not 'builtins' or 'classes'. Must be an array of global constructor names.","wrong":"[\"transform-builtin-classes\", { \"builtins\": [\"Array\"] }]","symbol":"globals option","correct":"[\"transform-builtin-classes\", { \"globals\": [\"Array\", \"Error\", \"HTMLElement\"] }]"},{"note":"In Rollup, the order must be inverted: builtin-classes before es2015-classes, contrary to Babel standalone.","wrong":"plugins: ['transform-es2015-classes', ['transform-builtin-classes', { globals: ['HTMLElement'] }]]","symbol":"rollup usage","correct":"plugins: [['transform-builtin-classes', { globals: ['HTMLElement'] }], 'transform-es2015-classes']"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    \"babel-plugin-transform-es2015-classes\",\n    [\"babel-plugin-transform-builtin-classes\", {\n      \"globals\": [\"Array\", \"Error\", \"HTMLElement\"],\n      \"logIfPatched\": true\n    }]\n  ]\n}\n\n// source.js\nclass MyArray extends Array {\n  first() { return this[0]; }\n}\nconst arr = new MyArray(1, 2, 3);\nconsole.log(arr instanceof MyArray); // true\nconsole.log(arr.first()); // 1","lang":"javascript","description":"Enables the plugin in Babel 6 configuration, targeting Array, Error, and HTMLElement globals. Shows a simple subclass of Array and verifies instance relationships."},"warnings":[{"fix":"Add 'babel-plugin-transform-es2015-classes' to plugins (or use babel-preset-es2015).","message":"Plugin requires babel-plugin-transform-es2015-classes (or preset es2015) to be present; otherwise no transformation occurs.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"For Babel: order as [\"transform-es2015-classes\", [\"transform-builtin-classes\",...]]. For Rollup: invert order.","message":"Plugin must be applied _after_ transform-es2015-classes in Babel, but _before_ it in Rollup. Incorrect order breaks subclassing.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Consider using @babel/plugin-proposal-class-properties and modern Babel presets, or switch to native ES2015+ environments.","message":"No updates since 2017; may be incompatible with Babel 7+ and modern JavaScript engines that natively support subclassing built-ins.","severity":"deprecated","affected_versions":"=0.6.1"},{"fix":"Ensure target browsers include IE11+ or polyfill Object.setPrototypeOf.","message":"Does not support Internet Explorer 10 or below. Requires Object.setPrototypeOf or __proto__.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Always provide a globals array: e.g., [\"Array\", \"Error\"].","message":"The 'globals' option default is an empty array; without specifying globals, no classes are transformed.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add the built-in to the globals option: e.g., { \"globals\": [\"Array\"] }.","cause":"Attempting to extend a built-in that is not in the globals list, so the plugin did not patch the prototype chain.","error":"TypeError: Cannot set prototype of #<MyArray> which only has a getter for 'prototype'"},{"fix":"Reorder plugins: ensure transform-es2015-classes comes before transform-builtin-classes (or after for Rollup).","cause":"The plugin is applied before transform-es2015-classes, leaving the class declaration untranspiled in older Babel.","error":"MyArray is not a constructor"},{"fix":"Remove 'HTMLElement' from globals when running in Node, or conditionally configure.","cause":"HTMLElement global is missing in Node.js environment; plugin only works in browser contexts.","error":"ReferenceError: HTMLElement is not defined"},{"fix":"Set logIfPatched: false or remove the option.","cause":"The logIfPatched option is enabled and logs for every class that extends a built-in, causing console noise.","error":"console.warn: ✔ builtin extends patched (too many times)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}