{"id":20048,"library":"gatsby-plugin-babel-react-live","title":"gatsby-plugin-babel-react-live","description":"Gatsby plugin that transforms JavaScript/TypeScript code inside LiveProvider components to strings using Babel, enabling React Live to display syntax-highlighted source code with full TypeScript support. Version 1.4.5 (latest) works with Gatsby and requires Node >=14.17.0. It is part of the Eufemia design system. Key differentiator: unlike manual stringification, this plugin automatically converts JSX/TSX inside LiveProvider children to string literals, supporting render callbacks with noInline output. Known limitations: currently works only with .tsx files, requires emotion v5, and needs cache clearing after changes to the Babel plugin.","status":"active","version":"1.4.5","language":"javascript","source_language":"en","source_url":"https://github.com/dnbexperience/eufemia","tags":["javascript","gatsby","gatsby-plugin","react","react live"],"install":[{"cmd":"npm install gatsby-plugin-babel-react-live","lang":"bash","label":"npm"},{"cmd":"yarn add gatsby-plugin-babel-react-live","lang":"bash","label":"yarn"},{"cmd":"pnpm add gatsby-plugin-babel-react-live","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Gatsby plugin, requires Gatsby to be installed","package":"gatsby","optional":false},{"reason":"Provides LiveProvider and related components","package":"react-live","optional":false},{"reason":"Required for TypeScript support, specifically version 5","package":"gatsby-plugin-emotion","optional":true}],"imports":[{"note":"This is a Gatsby plugin, not a runtime module. It is added to gatsby-config.js plugins array, not imported in source files.","wrong":"// Wrong: trying to import in a component\nimport gatsbyPluginBabelReactLive from 'gatsby-plugin-babel-react-live'","symbol":"gatsby-plugin-babel-react-live","correct":"// gatsby-config.js\nplugins: ['gatsby-plugin-babel-react-live']"},{"note":"LiveProvider is from react-live, not from this plugin. The plugin transforms code inside LiveProvider at build time.","wrong":"import { LiveProvider } from 'gatsby-plugin-babel-react-live'","symbol":"LiveProvider","correct":"import { LiveProvider } from 'react-live'"},{"note":"The underlying Babel plugin is used automatically; do not import it manually.","wrong":"const babelPluginReactLive = require('babel-plugin-react-live')","symbol":"babel-plugin-react-live","correct":"// used internally by the Gatsby plugin; no direct import needed"}],"quickstart":{"code":"// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-plugin-babel-react-live',\n      options: {\n        componentName: 'LiveCode',\n        filesToMatch: ['Examples.tsx'],\n        prettierPath: require.resolve('./.prettierrc'),\n      },\n    },\n  ],\n}","lang":"javascript","description":"Configures the plugin in gatsby-config.js to transform code inside LiveProvider components in .tsx files."},"warnings":[{"fix":"Rename .jsx files to .tsx or wait for a future version with JS support.","message":"Currently works only with TypeScript (.tsx) files, not JavaScript (.jsx).","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Install gatsby-plugin-emotion@5 and configure it in gatsby-config.js.","message":"Requires gatsby-plugin-emotion v5 for TypeScript support; other versions may cause double imports and break the build.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Run `gatsby clean` before building or developing.","message":"After modifying the Babel plugin (babel-plugin-react-live), you must clean the Gatsby cache, otherwise Webpack/Babel will use a cached version.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure react-live and babel-plugin-react-live are installed as dependencies.","message":"The plugin is part of the Eufemia design system monorepo; standalone usage may require additional dependencies.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Rename the file to .tsx or configure webpack to handle .jsx with the plugin's transform.","cause":"The plugin's Babel transform is not being applied because the file is .jsx instead of .tsx.","error":"Module parse failed: Unexpected token (1:8) You may need an appropriate loader to handle this file type."},{"fix":"Upgrade to gatsby-plugin-emotion@5.","cause":"Running gatsby-plugin-emotion v4 or incompatible version causes double imports when using TypeScript.","error":"Duplicate import of 'react'"},{"fix":"Run `yarn add babel-plugin-react-live` or `npm install babel-plugin-react-live`.","cause":"babel-plugin-react-live is not installed as a dependency.","error":"Error: Cannot find module 'babel-plugin-react-live'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}