{"id":19071,"library":"babel-plugin-hylid-bridge","title":"babel-plugin-hylid-bridge","description":"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.","status":"active","version":"6.3.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install babel-plugin-hylid-bridge","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-hylid-bridge","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-hylid-bridge","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency to function as a Babel plugin.","package":"@babel/core","optional":true}],"imports":[{"note":"CJS require is allowed but ESM is preferred. The plugin is a function passed to Babel config.","wrong":"const babelPluginHylidBridge = require('babel-plugin-hylid-bridge')","symbol":"default","correct":"import babelPluginHylidBridge from 'babel-plugin-hylid-bridge'"},{"note":"You can use the string name directly. Direct require of the plugin function is possible but unnecessary.","wrong":"module.exports = { plugins: [require('babel-plugin-hylid-bridge')] }","symbol":"default","correct":"// In .babelrc or babel.config.js:\nmodule.exports = {\n  plugins: ['babel-plugin-hylid-bridge']\n}"},{"note":"The plugin is a function that returns a Babel plugin object. Must be invoked with options if any.","wrong":"// Missing plugin call:\nmodule.exports = withPlugins([require('babel-plugin-hylid-bridge')]);","symbol":"default","correct":"// In next.config.js with next-compose-plugins:\nconst withPlugins = require('next-compose-plugins');\nmodule.exports = withPlugins([\n  [require('babel-plugin-hylid-bridge'), { /* options */ }]\n]);"}],"quickstart":{"code":"// Install:\n// npm install --save-dev babel-plugin-hylid-bridge\n\n// In babel.config.js:\nmodule.exports = {\n  presets: ['next/babel'],\n  plugins: [\n    ['babel-plugin-hylid-bridge', {\n      // options: e.g., { hydra: 'hydra' } // customization for binding name\n    }]\n  ]\n};\n\n// Then in your Hydra component:\nimport { Hydra } from 'hylid'; // This import gets transformed for SSR\n\n// The plugin will transform the import to a bridge that loads Hydra only on client.\n// For example, it might become:\n// const Hydra = typeof window !== 'undefined' ? require('hylid').Hydra : null;","lang":"javascript","description":"Demonstrates installation and configuration of the plugin in babel.config.js for a Next.js project."},"warnings":[{"fix":"Update babel.config.js: plugins: [['babel-plugin-hylid-bridge', options]] instead of plugins: [babelPluginHylidBridge(options)].","message":"Version 5.x to 6.x changed the plugin interface: options must be passed as an array to plugins, not as an object directly.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Replace 'name' with 'hydra' in options object.","message":"Option 'name' has been deprecated since v6.0.0 in favor of 'hydra'.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Order in plugins array: add after 'next/babel' preset or after other presets that require Hydra transforms.","message":"Plugin must be placed after 'next/babel' preset to work correctly.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add 'babel-plugin-hylid-bridge' to your Babel plugins. If not using Next.js, you need to ensure Babel is processing the files.","cause":"Babel is not configured to transform Hydra import in a non-Next.js project.","error":"Module parse failed: Unexpected token (5:16)\nYou may need an appropriate loader to handle this file type."},{"fix":"Ensure your import matches the configured source: import { Hydra } from 'hydra'; or adjust the 'hydra' option in plugin.","cause":"The plugin expects the import source to be 'hydra' (default) or specified by option.","error":"Cannot find module 'hydra'"},{"fix":"Use string name: plugins: ['babel-plugin-hylid-bridge'] or call the function: plugins: [require('babel-plugin-hylid-bridge')()].","cause":"You are using require() directly in plugins array without calling it.","error":"babel-plugin-hylid-bridge is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}