babel-plugin-hylid-bridge

6.3.2 verified Sat Apr 25 auth: no javascript

A Babel plugin that transforms Hydra imports into a bridge to enable server-side rendering (SSR) for Hydra components. The current stable version 6.3.2 is part of the Hylid ecosystem, released with moderate cadence. It differentiates from other SSR solutions by integrating specifically with the Hylid component model, allowing hydration of components in both client and server environments. The plugin is designed to work with Babel 7+ and is primarily used in Next.js or similar frameworks that require SSR support for Hydra-based UI. The package ships TypeScript types for enhanced developer experience.

Common errors

error Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type. ↓

cause Babel is not configured to transform Hydra import in a non-Next.js project.

fix

Add 'babel-plugin-hylid-bridge' to your Babel plugins. If not using Next.js, you need to ensure Babel is processing the files.

error Cannot find module 'hydra' ↓

cause The plugin expects the import source to be 'hydra' (default) or specified by option.

fix

Ensure your import matches the configured source: import { Hydra } from 'hydra'; or adjust the 'hydra' option in plugin.

error babel-plugin-hylid-bridge is not a function ↓

cause You are using require() directly in plugins array without calling it.

fix

Use string name: plugins: ['babel-plugin-hylid-bridge'] or call the function: plugins: [require('babel-plugin-hylid-bridge')()].

Warnings

breaking Version 5.x to 6.x changed the plugin interface: options must be passed as an array to plugins, not as an object directly. ↓

fix Update babel.config.js: plugins: [['babel-plugin-hylid-bridge', options]] instead of plugins: [babelPluginHylidBridge(options)].

deprecated Option 'name' has been deprecated since v6.0.0 in favor of 'hydra'. ↓

fix Replace 'name' with 'hydra' in options object.

gotcha Plugin must be placed after 'next/babel' preset to work correctly. ↓

fix Order in plugins array: add after 'next/babel' preset or after other presets that require Hydra transforms.

Install

npm install babel-plugin-hylid-bridge

yarn add babel-plugin-hylid-bridge

pnpm add babel-plugin-hylid-bridge

Imports

default

wrong

const babelPluginHylidBridge = require('babel-plugin-hylid-bridge')

correct

import babelPluginHylidBridge from 'babel-plugin-hylid-bridge'

CJS require is allowed but ESM is preferred. The plugin is a function passed to Babel config.

default

wrong

module.exports = { plugins: [require('babel-plugin-hylid-bridge')] }

correct

// In .babelrc or babel.config.js:
module.exports = {
  plugins: ['babel-plugin-hylid-bridge']
}

You can use the string name directly. Direct require of the plugin function is possible but unnecessary.

default

wrong

// Missing plugin call:
module.exports = withPlugins([require('babel-plugin-hylid-bridge')]);

correct

// In next.config.js with next-compose-plugins:
const withPlugins = require('next-compose-plugins');
module.exports = withPlugins([
  [require('babel-plugin-hylid-bridge'), { /* options */ }]
]);

The plugin is a function that returns a Babel plugin object. Must be invoked with options if any.

Quickstart

Demonstrates installation and configuration of the plugin in babel.config.js for a Next.js project.

// Install:
// npm install --save-dev babel-plugin-hylid-bridge

// In babel.config.js:
module.exports = {
  presets: ['next/babel'],
  plugins: [
    ['babel-plugin-hylid-bridge', {
      // options: e.g., { hydra: 'hydra' } // customization for binding name
    }]
  ]
};

// Then in your Hydra component:
import { Hydra } from 'hylid'; // This import gets transformed for SSR

// The plugin will transform the import to a bridge that loads Hydra only on client.
// For example, it might become:
// const Hydra = typeof window !== 'undefined' ? require('hylid').Hydra : null;