babel-plugin-react-live

1.4.5 verified Sat Apr 25 auth: no javascript

A Babel plugin that transforms JavaScript/TypeScript code inside React Live's `<LiveProvider>` into a string, enabling fully typed live code examples. Current stable version is 1.4.5 (last released 2023). It replaces child JSX elements with string literals and converts render callbacks to use `noInline` with `render()` calls. Part of the Eufemia design system from DNB. Differentiators: uses AST for accurate transformation, supports TypeScript, and handles both inline and render callback patterns.

Common errors

error Error: Cannot find module 'babel-plugin-react-live' ↓

cause Plugin not installed or missing from package.json devDependencies.

fix

Run npm install --save-dev babel-plugin-react-live.

error SyntaxError: Unexpected token (1:1) while parsing file: Example.tsx ↓

cause Babel is not configured to parse JSX or TypeScript.

fix

Add @babel/preset-react and @babel/preset-typescript to your Babel presets.

error TypeError: Cannot read properties of undefined (reading 'map') ↓

cause Plugin options are malformed: `filesToMatch` is not an array.

fix

Ensure filesToMatch is an array of strings, e.g., ["Examples.tsx"].

Warnings

gotcha Plugin only transforms components whose name matches the configured `componentName`. If component name differs, no transformation occurs silently. ↓

fix Ensure your live code wrapper component's name matches `componentName` exactly.

gotcha `filesToMatch` must be an array of exact filenames; glob patterns are not supported and will be ignored. ↓

fix Specify exact filenames: ["Examples.tsx", "Demo.tsx"].

deprecated The `prettierPath` option is deprecated in favor of automatic resolution from project config. ↓

fix Remove `prettierPath` from plugin options; prettier config is auto-detected.

gotcha Plugin does not transform code inside `render` callbacks that use implicit return; only explicit arrow function bodies are processed. ↓

fix Use explicit return or wrap in braces: `{() => { return <div/>; }}`

Install

npm install babel-plugin-react-live

yarn add babel-plugin-react-live

pnpm add babel-plugin-react-live

Imports

default

wrong

const babelPluginReactLive = require('babel-plugin-react-live')

correct

import babelPluginReactLive from 'babel-plugin-react-live'

CommonJS require works but ESM import is recommended. The package is an ESM/CJS hybrid.

componentName

wrong

/* wrong: using plugin as string without array */ { "plugins": ["babel-plugin-react-live"] }

correct

/* in .babelrc */ { "plugins": [["babel-plugin-react-live", { "componentName": "MyComponent" }]] }

Plugin must be configured with options array; componentName is required for matching.

filesToMatch

wrong

/* wrong: using glob pattern */ { "filesToMatch": "*.tsx" }

correct

/* in .babelrc */ { "plugins": [["babel-plugin-react-live", { "filesToMatch": ["Examples.tsx"] }]] }

filesToMatch must be an array of exact filenames, not globs.

Quickstart

Configure Babel plugin to transform React Live code examples with TypeScript support.

// Install: npm install --save-dev babel-plugin-react-live
// .babelrc
{
  "plugins": [
    [
      "babel-plugin-react-live",
      {
        "componentName": "LiveExample",
        "filesToMatch": ["Examples.tsx"],
        "prettierPath": "./.prettierrc"
      }
    ]
  ]
}

// Example.tsx
import { LiveProvider, LiveEditor, LivePreview } from 'react-live';

const LiveExample = () => {
  const foo = 'bar';
  return (
    <LiveProvider scope={{ foo }}>
      <LiveEditor />
      <LivePreview />
    </LiveProvider>
  );
};
// Transformed: <LiveProvider> children become string literals