Zova Component Babel Plugin

1.1.8 verified Sat Apr 25 auth: no javascript

babel-plugin-zova-component is a Babel plugin for transforming component metadata in the Zova framework. Version 1.1.8 is the latest stable release; the plugin is released as part of the Zova ecosystem with no fixed cadence. It is specifically designed to work with Zova's component system, automatically inserting runtime metadata during the build process. Unlike generic Babel plugins, this one is tightly coupled to Zova's architecture and should only be used within Zova projects. The plugin requires Babel 7+ and is typically used alongside other Zova-specific build tools.

Common errors

error Error: [BABEL] unknown plugin "babel-plugin-zova-component" specified in "..." ↓

cause The plugin is not installed or not in node_modules.

fix

Run 'npm install babel-plugin-zova-component --save-dev' or 'yarn add babel-plugin-zova-component --dev'.

error TypeError: (0 , _babelPluginZovaComponent.default) is not a function ↓

cause Attempting to import the plugin via ES module import instead of require().

fix

Use require() in your Babel config: module.exports = { plugins: [require('babel-plugin-zova-component')] };

error ReferenceError: defineComponent is not defined ↓

cause The plugin's transform depends on Zova's defineComponent being available globally or imported.

fix

Import defineComponent from 'zova' in your component files: import { defineComponent } from 'zova';

Warnings

gotcha This plugin only works within Zova projects. Using it in non-Zova projects will produce no transformation or may error. ↓

fix Ensure your project is built on the Zova framework. If you are not using Zova, remove this plugin.

gotcha The plugin expects components to be defined using Zova's 'defineComponent' or similar Zova-specific syntax. Plain React or Vue component definitions will not be processed. ↓

fix Wrap your components with Zova's defineComponent or use Zova's component API.

deprecated Some configuration options from earlier versions have been deprecated. Check the plugin source for current supported options. ↓

fix Update your config to use only documented options. Refer to the plugin's README or source code for the latest list.

breaking Version 1.1.0 changed the way metadata is inserted, which may break custom serialization or tree-shaking setups. ↓

fix Review your build output for changes in metadata format. If you rely on or parse the inserted metadata, adjust accordingly.

Install

npm install babel-plugin-zova-component

yarn add babel-plugin-zova-component

pnpm add babel-plugin-zova-component

Imports

default

wrong

import plugin from 'babel-plugin-zova-component';

correct

module.exports = require('babel-plugin-zova-component');

This package is CJS-only and should be used with require(). ESM import will fail.

babel-plugin-zova-component

wrong

module.exports = {
  presets: ['babel-plugin-zova-component']
};

correct

// babel.config.js
module.exports = {
  plugins: ['babel-plugin-zova-component']
};

This is a plugin, not a preset. Do not place it in the presets array.

babel-plugin-zova-component (with options)

wrong

module.exports = {
  plugins: [
    { 'babel-plugin-zova-component': { /* options */ } }
  ]
};

correct

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-zova-component', { /* options */ }]
  ]
};

Options should be passed in an array entry, not an object with the plugin name as key.

Quickstart

Configures Babel with the plugin and shows a typical component definition in Zova.

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }]
  ],
  plugins: ['babel-plugin-zova-component']
};

// index.js
import { defineComponent } from 'zova';
export default defineComponent({
  // component code
});

// Run: npx babel index.js --out-file compiled.js