{"id":26156,"library":"react-hcl","title":"react-hcl","description":"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.","status":"active","version":"0.2.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install react-hcl","lang":"bash","label":"npm"},{"cmd":"yarn add react-hcl","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-hcl","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for transpilation and type checking, required at build time","package":"typescript","optional":true}],"imports":[{"note":"Do not mix with real React; jsx is the custom JSX factory","wrong":"import React from 'react'; import { jsx } from 'react-hcl'","symbol":"jsx","correct":"import { jsx } from 'react-hcl'"},{"note":"resource is lowercase, not a class; it's a function to define Terraform resources","wrong":"import { Resource } from 'react-hcl'","symbol":"resource","correct":"import { resource } from 'react-hcl'"},{"note":"jsxDev is only available from subpath /jsx-dev-runtime for development mode","wrong":"import { jsxDev } from 'react-hcl'","symbol":"jsxDev","correct":"import { jsxDev } from 'react-hcl/jsx-dev-runtime'"}],"quickstart":{"code":"// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"react-hcl\"\n  }\n}\n\n// main.tsx\nimport { resource, jsx } from 'react-hcl';\n\nexport const App = () => (\n  <resource\n    type=\"aws_instance\"\n    name=\"example\"\n    args={{\n      ami: \"ami-0c55b159cbfafe1f0\",\n      instance_type: \"t2.micro\"\n    }}\n  />\n);\n\n// Run:\n// npx tsc --noEmit\n// react-hcl compile main.tsx > output.tf","lang":"typescript","description":"Shows project setup with tsconfig for react-hcl JSX factory, a component using resource helper, and CLI compile command to generate Terraform HCL."},"warnings":[{"fix":"Update tsconfig.json `jsxFactory` to `jsx` or use `jsxImportSource`","message":"v0.2.x changed JSX factory name from `createElement` to `jsx`","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Migrate to `jsx` by updating `jsxFactory` compiler option","message":"react-hcl v0.1.x used `h` as the JSX factory","severity":"deprecated","affected_versions":"<0.2.0"},{"fix":"Set `\"jsxImportSource\": \"react-hcl\"` in tsconfig and avoid importing React","message":"Do not import from React; react-hcl has its own JSX runtime","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Add `\"jsxImportSource\": \"react-hcl\"` to tsconfig.json or import { jsx } from 'react-hcl'","cause":"Using global React JSX instead of react-hcl's JSX factory","error":"TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead."},{"fix":"Ensure tsconfig has `\"jsx\": \"react-jsx\"` and `\"jsxImportSource\": \"react-hcl\"`","cause":"Wrong import path or not using the JSX transform correctly","error":"TypeError: (0 , react_hcl_1.jsx) is not a function"},{"fix":"Only import `jsxDev` from `'react-hcl/jsx-dev-runtime'` when using `\"jsx\": \"react-jsxdev\"`","cause":"Using development JSX runtime without the correct path or missing dependency","error":"Cannot find module 'react-hcl/jsx-dev-runtime'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}