react-hcl

library0.2.2jsnpmunverified

react-hcl (v0.2.2) is an experimental JSX/TSX-to-Terraform (.tf) transpiler that leverages a custom JSX runtime to convert React-like components directly into HCL, Terraform's configuration language. Unlike traditional Infrastructure as Code tools (e.g., Pulumi, CDKTF) which use actual programming languages to generate infrastructure, react-hcl translates JSX syntax at build time into pure Terraform files, enabling a declarative, component-based approach without any runtime overhead. It integrates with TypeScript (peer dep ^5), ships TypeScript definitions, and is intended for static compilation only—no runtime dependencies. Release cadence is experimental; breaking changes expected.

devops web-framework

npm install react-hcl

package ↗

INSTALL

IMPORT

SIG · REACT-HCL

react-hcl

devopsjavascriptv0.2.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

jsx

✓ import { jsx } from 'react-hcl'

✗ import React from 'react'; import { jsx } from 'react-hcl'

Do not mix with real React; jsx is the custom JSX factory

resource

✓ import { resource } from 'react-hcl'

✗ import { Resource } from 'react-hcl'

resource is lowercase, not a class; it's a function to define Terraform resources

jsxDev

✓ import { jsxDev } from 'react-hcl/jsx-dev-runtime'

✗ import { jsxDev } from 'react-hcl'

jsxDev is only available from subpath /jsx-dev-runtime for development mode

Shows project setup with tsconfig for react-hcl JSX factory, a component using resource helper, and CLI compile command to generate Terraform HCL.

// tsconfig.json { "compilerOptions": { "target": "ES2020", "module": "ESNext", "moduleResolution": "bundler", "jsx": "react-jsx", "jsxImportSource": "react-hcl" } } // main.tsx import { resource, jsx } from 'react-hcl'; export const App = () => ( <resource type="aws_instance" name="example" args={{ ami: "ami-0c55b159cbfafe1f0", instance_type: "t2.micro" }} /> ); // Run: // npx tsc --noEmit // react-hcl compile main.tsx > output.tf

Debug

Known issues

breakingv0.2.x changed JSX factory name from `createElement` to `jsx`

fix

Update tsconfig.json `jsxFactory` to `jsx` or use `jsxImportSource`

affects: >=0.2.0

deprecatedreact-hcl v0.1.x used `h` as the JSX factory

fix

Migrate to `jsx` by updating `jsxFactory` compiler option

affects: <0.2.0

gotchaDo not import from React; react-hcl has its own JSX runtime

fix

Set `"jsxImportSource": "react-hcl"` in tsconfig and avoid importing React

affects: all

Errors

Common errors & fixes

TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Using global React JSX instead of react-hcl's JSX factory

fix

Add `"jsxImportSource": "react-hcl"` to tsconfig.json or import { jsx } from 'react-hcl'

TypeError: (0 , react_hcl_1.jsx) is not a function

Wrong import path or not using the JSX transform correctly

fix

Ensure tsconfig has `"jsx": "react-jsx"` and `"jsxImportSource": "react-hcl"`

Cannot find module 'react-hcl/jsx-dev-runtime'

Using development JSX runtime without the correct path or missing dependency

fix

Only import `jsxDev` from `'react-hcl/jsx-dev-runtime'` when using `"jsx": "react-jsxdev"`

Upgrade

Version history

0.2.2latest on npm

Audit

Dependencies

typescriptoptionalPeer dependency for transpilation and type checking, required at build time

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/react-hcl ↗