Registry / babel-plugin-react-live

babel-plugin-react-live

library1.4.5jsnpmunverified

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.

npm install babel-plugin-react-live

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-live

javascriptv1.4.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

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

componentName

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

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

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

filesToMatch

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

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

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

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

Debug

Known issues

gotchaPlugin 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.

affects: *

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"].

affects: >=1.0.0

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

fix

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

affects: >=1.4.0

gotchaPlugin 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/>; }}`

affects: <1.5.0

Errors

Common errors & fixes

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

Plugin not installed or missing from package.json devDependencies.

fix

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

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

Babel is not configured to parse JSX or TypeScript.

fix

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

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

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

fix

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

Upgrade

Version history

1.4.5latest on npm

Audit

Dependencies

@babel/corerequiredpeer dependency for Babel plugin system

react-liverequiredruntime dependency for LiveProvider component

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/dnbexperience/eufemia ↗

packagehttps://www.npmjs.com/package/babel-plugin-react-live ↗