{"id":12870,"library":"babel-plugin-syntax-hermes-parser","title":"Babel Hermes Parser Plugin","description":"The `babel-plugin-syntax-hermes-parser` is a Babel plugin designed to switch Babel's default parser, `@babel/parser`, to `hermes-parser`. This provides significant performance benefits due to `hermes-parser` being compiled to WASM from C++, resulting in faster parsing. Additionally, it offers comprehensive syntax support for Flow, making it particularly useful for projects leveraging Flow type annotations. The current stable version, 0.35.0, indicates active development within the Babel and Hermes ecosystems, likely released in tandem with updates to the underlying `hermes-parser` or Babel itself. Its key differentiator lies in its speed and robust Flow support, distinguishing it from other parser options.","status":"active","version":"0.35.0","language":"javascript","source_language":"en","source_url":"git@github.com:facebook/hermes","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-syntax-hermes-parser","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-syntax-hermes-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-syntax-hermes-parser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This plugin acts as a bridge, making Babel use the `hermes-parser` internally.","package":"hermes-parser","optional":false}],"imports":[{"note":"This plugin is configured in `babel.config.json` or equivalent Babel configuration files, not imported directly into JavaScript code. It should be listed in the `plugins` array.","wrong":"import 'babel-plugin-syntax-hermes-parser'; // This is a Babel config plugin, not for direct JS import","symbol":"babel-plugin-syntax-hermes-parser","correct":"{ \"plugins\": [\"babel-plugin-syntax-hermes-parser\"] }"},{"note":"Parser-specific options for `hermes-parser` are passed via the global `parserOpts` key in your Babel configuration, not directly as options to the plugin entry itself. This ensures they are applied correctly by Babel.","wrong":"{ \"babel-plugin-syntax-hermes-parser\": { \"allowReturnOutsideFunction\": true } }","symbol":"parserOpts","correct":"{ \"plugins\": [\"babel-plugin-syntax-hermes-parser\"], \"parserOpts\": { \"allowReturnOutsideFunction\": true } }"}],"quickstart":{"code":"{\n  \"plugins\": [\n    \"babel-plugin-syntax-hermes-parser\"\n  ],\n  \"parserOpts\": {\n    \"allowReturnOutsideFunction\": false,\n    \"flow\": \"all\"\n  }\n}\n","lang":"json","description":"This `babel.config.json` snippet demonstrates how to enable the Hermes parser plugin and configure basic parser options, such as allowing Flow syntax and controlling specific parsing behaviors."},"warnings":[{"fix":"Review your Babel configuration and remove redundant syntax plugins. The Hermes parser is designed to handle common JavaScript syntax and Flow types natively, often making other syntax plugins unnecessary.","message":"When switching to `babel-plugin-syntax-hermes-parser`, ensure that other parser-related Babel plugins (e.g., `@babel/plugin-syntax-flow`, `@babel/plugin-syntax-typescript`) are either removed or configured carefully to avoid conflicts. Having multiple parser plugins for the same syntax might lead to unexpected errors or parsing failures.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Verify that your build tools (e.g., Webpack, Rollup) are configured to correctly bundle and serve WASM modules. Most modern setups handle this by default.","message":"The primary benefit of this plugin is its performance due to the underlying `hermes-parser` being compiled to WASM. Ensure your build environment and tooling correctly handle WASM artifacts. In some edge cases or restrictive environments, WASM loading might present issues, though this is rare in modern Node.js/browser environments.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For TypeScript-only projects, consider sticking with `@babel/plugin-transform-typescript` or similar TypeScript-focused solutions. Evaluate the performance benefits against potential configuration complexity for your specific use case.","message":"While the plugin provides excellent Flow support, if your project exclusively uses TypeScript, integrating `babel-plugin-syntax-hermes-parser` might be an unnecessary dependency, and could potentially introduce subtle incompatibilities if not carefully managed alongside TypeScript-specific Babel plugins. It's optimized for Flow's specific syntax.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev babel-plugin-syntax-hermes-parser` or `yarn add --dev babel-plugin-syntax-hermes-parser` in your project directory.","cause":"The package `babel-plugin-syntax-hermes-parser` was not installed or is not resolvable in the current project's `node_modules`.","error":"Error: Cannot find plugin \"babel-plugin-syntax-hermes-parser\" relative to file \"<path>/babel.config.json\""},{"fix":"Remove the redundant syntax plugin from your Babel configuration. `babel-plugin-syntax-hermes-parser` natively supports Flow syntax, making `@babel/plugin-syntax-flow` unnecessary.","cause":"Multiple Babel plugins are attempting to parse the same syntax feature (e.g., Flow types). This often happens when `babel-plugin-syntax-hermes-parser` is enabled alongside another plugin like `@babel/plugin-syntax-flow`.","error":"Error: Duplicated parser plugin for 'flow' (or other syntax) at <file_path>"},{"fix":"Ensure `parserOpts` is an object, even if empty, in your Babel configuration. For example: `\"parserOpts\": {}` or `\"parserOpts\": { \"flow\": \"all\" }`.","cause":"The `parserOpts` in `babel.config.json` is either missing or incorrectly formatted (e.g., null, array, or primitive) when the plugin expects an object of configuration.","error":"TypeError: 'parserOpts' must be an object of options."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null}