OpenComponents React Template Compiler

11.0.0 verified Fri May 01 auth: no javascript

Compiler for the React template in the OpenComponents (oc) ecosystem. Version 11.0.0 provides a Webpack-based build pipeline to transform React components into deployable OC packages. Primarily used internally by the oc-registry build process. It compiles JSX, handles asset bundling, and produces server-side renderable bundles. Releases follow the OpenComponents monorepo cadence. Differs from other React build tools by being tightly coupled to the OC registry workflow.

Common errors

error Error: Cannot find module 'oc-template-react' ↓

cause Missing peer dependency oc-template-react

fix

npm install oc-template-react

error TypeError: compiler.compile is not a function ↓

cause Importing wrong symbol (e.g., default import of Compiler class without instantiation)

fix

Use: import { Compiler } from 'oc-template-react-compiler'; const compiler = new Compiler(...);

error Module parse failed: Unexpected token (1:0) ↓

cause Webpack configuration missing JSX loader

fix

Ensure babel-loader with @babel/preset-react is in webpack config.

Warnings

breaking Version 10.0.0 dropped support for React 16 ↓

fix Upgrade to React 17 or 18, or pin to version 9.x if needed.

deprecated The `options` parameter in compiler constructor is deprecated ↓

fix Pass configuration directly as shown in quickstart.

gotcha Requires webpack 5; webpack 4 will throw an error ↓

fix Ensure webpack 5 is installed as a devDependency.

Install

npm install oc-template-react-compiler

yarn add oc-template-react-compiler

pnpm add oc-template-react-compiler

Imports

Compiler

import { Compiler } from 'oc-template-react-compiler'

Default export is the Compiler class

compile

wrong

import compile from 'oc-template-react-compiler'

correct

import { compile } from 'oc-template-react-compiler'

compile is a named export, not default

Quickstart

Creates a compiler instance for a React component and runs the build.

import { Compiler } from 'oc-template-react-compiler';
const compiler = new Compiler({
  component: { name: 'MyComponent', version: '1.0.0' },
  path: './src',
  oc: {registries: {}}
});
compiler.compile().then(result => console.log(result));