react-hcl

0.2.2 verified Fri May 01 auth: no javascript

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.

Common errors

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

cause 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'

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

cause Wrong import path or not using the JSX transform correctly

fix

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

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

cause 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"

Warnings

breaking v0.2.x changed JSX factory name from `createElement` to `jsx` ↓

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

deprecated react-hcl v0.1.x used `h` as the JSX factory ↓

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

gotcha Do not import from React; react-hcl has its own JSX runtime ↓

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

Install

npm install react-hcl

yarn add react-hcl

pnpm add react-hcl

Imports

jsx

wrong

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

correct

import { jsx } from 'react-hcl'

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

resource
wrong
```
import { Resource } from 'react-hcl'
```
correct
```
import { resource } from 'react-hcl'
```
resource is lowercase, not a class; it's a function to define Terraform resources
jsxDev
wrong
```
import { jsxDev } from 'react-hcl'
```
correct
```
import { jsxDev } from 'react-hcl/jsx-dev-runtime'
```
jsxDev is only available from subpath /jsx-dev-runtime for development mode

Quickstart

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