{"id":26061,"library":"paperclip-compiler-react","title":"Paperclip React Compiler","description":"Paperclip is a visual programming language for building component-based UIs with a live editor. This package compiles Paperclip templates to React components (JSX). Version 18.3.8 targets React 18. Releases align with Paperclip core. Differentiator: enables seamless visual editing and code generation for React projects, supporting TypeScript and ES modules.","status":"active","version":"18.3.8","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install paperclip-compiler-react","lang":"bash","label":"npm"},{"cmd":"yarn add paperclip-compiler-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add paperclip-compiler-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Paperclip compiler and AST types","package":"paperclip","optional":false},{"reason":"Peer dependency for JSX runtime","package":"react","optional":true}],"imports":[{"note":"ESM-only since v17.0. Use dynamic import() in CommonJS.","wrong":"const { compileReact } = require('paperclip-compiler-react')","symbol":"compileReact","correct":"import { compileReact } from 'paperclip-compiler-react'"},{"note":"ReactCompiler is exported from this package, not from paperclip core.","wrong":"import { ReactCompiler } from 'paperclip'","symbol":"ReactCompiler","correct":"import { ReactCompiler } from 'paperclip-compiler-react'"},{"note":"Default export is the compileReact function.","wrong":"import { default } from 'paperclip-compiler-react'","symbol":"default","correct":"import PaperclipReact from 'paperclip-compiler-react'"}],"quickstart":{"code":"import { compileReact } from 'paperclip-compiler-react';\nimport { readFileSync } from 'fs';\n\nconst paperclipCode = readFileSync('component.pc', 'utf8');\nconst options = { module: 'esm', typescript: true };\nconst result = compileReact(paperclipCode, options);\nconsole.log(result.code);","lang":"typescript","description":"Compile a Paperclip file to a React component (JSX) with TypeScript output using ESM module format."},"warnings":[{"fix":"Use `providers` option with a function instead.","message":"removeProviders option removed in v18.0","severity":"breaking","affected_versions":">=18.0"},{"fix":"Switch to import or use dynamic import().","message":"ESM-only from v17.0. require() no longer works.","severity":"breaking","affected_versions":">=17.0"},{"fix":"Use `module` option instead.","message":"compileReact option `target` deprecated in v16.0","severity":"deprecated","affected_versions":">=16.0 <18.0"},{"fix":"Add .js extension to relative imports inside Paperclip files.","message":"Module resolution requires file extensions in import paths when using TypeScript","severity":"gotcha","affected_versions":">=15.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Install peer dependency: npm install paperclip","cause":"paperclip core package not installed","error":"Cannot find module 'paperclip'"},{"fix":"Use import statement or dynamic import()","cause":"Using require() in ESM-only version","error":"TypeError: compileReact is not a function"},{"fix":"Set type: module in package.json or use .mjs extension","cause":"Using ESM syntax in CommonJS file with Node <13","error":"SyntaxError: Unexpected token 'export'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}