{"id":19310,"library":"babel-preset-metal","title":"Babel Preset for Metal.js","description":"A Babel preset for Metal.js projects that automatically registers components and transpiles ES2015 for IE9+ compatibility. Version 4.1.0 is the latest stable release, with maintenance updates as needed. Key differentiators: minimal configuration for Metal.js, includes all necessary transforms for the framework's component system. Alternatives like standard babel-preset-env require manual plugin setup.","status":"maintenance","version":"4.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/metal/babel-preset-metal","tags":["javascript","babel","babel-preset","metal"],"install":[{"cmd":"npm install babel-preset-metal","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-metal","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-metal","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Used as a Babel preset, not imported directly in code.","wrong":"import metal from 'babel-preset-metal'","symbol":"default","correct":"module.exports = { presets: ['metal'] }"},{"note":"Named export available in ES modules. CommonJS require may work but is discouraged in modern Babel configurations.","wrong":"const plugins = require('babel-preset-metal').plugins","symbol":"plugins","correct":"import { plugins } from 'babel-preset-metal'"},{"note":"Preset should be referenced by string name in Babel config, not imported as a module.","wrong":"import preset from 'babel-preset-metal'","symbol":"preset","correct":"// In .babelrc: { \"presets\": [\"metal\"] }"}],"quickstart":{"code":"// .babelrc\n{\n  \"presets\": [\"metal\"]\n}\n\n// Install\nnpm install --save-dev babel-preset-metal@^4.0.0\n\n// Example component\nimport { Component } from 'metal-component';\nimport { Soy } from 'metal-soy';\n\nclass MyComponent extends Component {\n  created() {\n    this.name = 'Metal';\n  }\n}\n\nSoy.register(MyComponent, 'MyComponent');\nexport { MyComponent };\n\n// Build with Babel\nnpx babel src --out-dir build","lang":"javascript","description":"Shows basic Babel configuration to transpile Metal.js components using the preset."},"warnings":[{"fix":"Use @babel/preset-metal for Babel 7 or upgrade to Metal.js version that uses Babel 7.","message":"This preset may not be compatible with Babel 7+ as it depends on Babel 6 presets/plugins.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use @babel/preset-metal instead: npm install --save-dev @babel/preset-metal","message":"babel-preset-metal is deprecated in favor of @babel/preset-metal for Babel 7 compatibility.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Avoid combining with other ES2015 presets; use babel-preset-env with 'useBuiltIns' or choose one preset.","message":"The preset includes plugins for ES2015 that may conflict with other presets (e.g., babel-preset-env) causing duplicate transforms.","severity":"gotcha","affected_versions":"*"},{"fix":"For advanced bundling, manually configure the metal plugin with explicit registration.","message":"The preset automatically adds the 'metal' plugin which registers components globally; this might cause issues with code splitting or lazy loading.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install with npm install --save-dev babel-preset-metal and ensure .babelrc is in project root.","cause":"Missing babel-preset-metal package or incorrect Babel config path.","error":"Module build failed: Error: Couldn't find preset \"metal\" relative to directory"},{"fix":"Upgrade to @babel/preset-metal or use Babel 6. Or configure with the standalone Babel package.","cause":"Mismatch between Babel version (Babel 7 expects functions, not objects).","error":"Error: Plugin/Preset files are not allowed to export objects, only functions."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}