Babel Preset for Metal.js

4.1.0 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error Module build failed: Error: Couldn't find preset "metal" relative to directory ↓

cause Missing babel-preset-metal package or incorrect Babel config path.

fix

Install with npm install --save-dev babel-preset-metal and ensure .babelrc is in project root.

error Error: Plugin/Preset files are not allowed to export objects, only functions. ↓

cause Mismatch between Babel version (Babel 7 expects functions, not objects).

fix

Upgrade to @babel/preset-metal or use Babel 6. Or configure with the standalone Babel package.

Warnings

breaking This preset may not be compatible with Babel 7+ as it depends on Babel 6 presets/plugins. ↓

fix Use @babel/preset-metal for Babel 7 or upgrade to Metal.js version that uses Babel 7.

deprecated babel-preset-metal is deprecated in favor of @babel/preset-metal for Babel 7 compatibility. ↓

fix Use @babel/preset-metal instead: npm install --save-dev @babel/preset-metal

gotcha The preset includes plugins for ES2015 that may conflict with other presets (e.g., babel-preset-env) causing duplicate transforms. ↓

fix Avoid combining with other ES2015 presets; use babel-preset-env with 'useBuiltIns' or choose one preset.

gotcha The preset automatically adds the 'metal' plugin which registers components globally; this might cause issues with code splitting or lazy loading. ↓

fix For advanced bundling, manually configure the metal plugin with explicit registration.

Install

npm install babel-preset-metal

yarn add babel-preset-metal

pnpm add babel-preset-metal

Imports

default

wrong

import metal from 'babel-preset-metal'

correct

module.exports = { presets: ['metal'] }

Used as a Babel preset, not imported directly in code.

plugins
wrong
```
const plugins = require('babel-preset-metal').plugins
```
correct
```
import { plugins } from 'babel-preset-metal'
```
Named export available in ES modules. CommonJS require may work but is discouraged in modern Babel configurations.
preset
wrong
```
import preset from 'babel-preset-metal'
```
correct
```
// In .babelrc: { "presets": ["metal"] }
```
Preset should be referenced by string name in Babel config, not imported as a module.

Quickstart

Shows basic Babel configuration to transpile Metal.js components using the preset.

// .babelrc
{
  "presets": ["metal"]
}

// Install
npm install --save-dev babel-preset-metal@^4.0.0

// Example component
import { Component } from 'metal-component';
import { Soy } from 'metal-soy';

class MyComponent extends Component {
  created() {
    this.name = 'Metal';
  }
}

Soy.register(MyComponent, 'MyComponent');
export { MyComponent };

// Build with Babel
npx babel src --out-dir build