{"id":19135,"library":"babel-plugin-react-live","title":"babel-plugin-react-live","description":"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.","status":"active","version":"1.4.5","language":"javascript","source_language":"en","source_url":"https://github.com/dnbexperience/eufemia","tags":["javascript","babel","babel-plugin","react","react live"],"install":[{"cmd":"npm install babel-plugin-react-live","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-live","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-live","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Babel plugin system","package":"@babel/core","optional":false},{"reason":"runtime dependency for LiveProvider component","package":"react-live","optional":false}],"imports":[{"note":"CommonJS require works but ESM import is recommended. The package is an ESM/CJS hybrid.","wrong":"const babelPluginReactLive = require('babel-plugin-react-live')","symbol":"default","correct":"import babelPluginReactLive from 'babel-plugin-react-live'"},{"note":"Plugin must be configured with options array; componentName is required for matching.","wrong":"/* wrong: using plugin as string without array */ { \"plugins\": [\"babel-plugin-react-live\"] }","symbol":"componentName","correct":"/* in .babelrc */ { \"plugins\": [[\"babel-plugin-react-live\", { \"componentName\": \"MyComponent\" }]] }"},{"note":"filesToMatch must be an array of exact filenames, not globs.","wrong":"/* wrong: using glob pattern */ { \"filesToMatch\": \"*.tsx\" }","symbol":"filesToMatch","correct":"/* in .babelrc */ { \"plugins\": [[\"babel-plugin-react-live\", { \"filesToMatch\": [\"Examples.tsx\"] }]] }"}],"quickstart":{"code":"// Install: npm install --save-dev babel-plugin-react-live\n// .babelrc\n{\n  \"plugins\": [\n    [\n      \"babel-plugin-react-live\",\n      {\n        \"componentName\": \"LiveExample\",\n        \"filesToMatch\": [\"Examples.tsx\"],\n        \"prettierPath\": \"./.prettierrc\"\n      }\n    ]\n  ]\n}\n\n// Example.tsx\nimport { LiveProvider, LiveEditor, LivePreview } from 'react-live';\n\nconst LiveExample = () => {\n  const foo = 'bar';\n  return (\n    <LiveProvider scope={{ foo }}>\n      <LiveEditor />\n      <LivePreview />\n    </LiveProvider>\n  );\n};\n// Transformed: <LiveProvider> children become string literals","lang":"typescript","description":"Configure Babel plugin to transform React Live code examples with TypeScript support."},"warnings":[{"fix":"Ensure your live code wrapper component's name matches `componentName` exactly.","message":"Plugin only transforms components whose name matches the configured `componentName`. If component name differs, no transformation occurs silently.","severity":"gotcha","affected_versions":"*"},{"fix":"Specify exact filenames: [\"Examples.tsx\", \"Demo.tsx\"].","message":"`filesToMatch` must be an array of exact filenames; glob patterns are not supported and will be ignored.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Remove `prettierPath` from plugin options; prettier config is auto-detected.","message":"The `prettierPath` option is deprecated in favor of automatic resolution from project config.","severity":"deprecated","affected_versions":">=1.4.0"},{"fix":"Use explicit return or wrap in braces: `{() => { return <div/>; }}`","message":"Plugin does not transform code inside `render` callbacks that use implicit return; only explicit arrow function bodies are processed.","severity":"gotcha","affected_versions":"<1.5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev babel-plugin-react-live`.","cause":"Plugin not installed or missing from package.json devDependencies.","error":"Error: Cannot find module 'babel-plugin-react-live'"},{"fix":"Add `@babel/preset-react` and `@babel/preset-typescript` to your Babel presets.","cause":"Babel is not configured to parse JSX or TypeScript.","error":"SyntaxError: Unexpected token (1:1) while parsing file: Example.tsx"},{"fix":"Ensure `filesToMatch` is an array of strings, e.g., `[\"Examples.tsx\"]`.","cause":"Plugin options are malformed: `filesToMatch` is not an array.","error":"TypeError: Cannot read properties of undefined (reading 'map')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}