gatsby-plugin-babel-react-live

1.4.5 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Module parse failed: Unexpected token (1:8) You may need an appropriate loader to handle this file type. ↓

cause The plugin's Babel transform is not being applied because the file is .jsx instead of .tsx.

fix

Rename the file to .tsx or configure webpack to handle .jsx with the plugin's transform.

error Duplicate import of 'react' ↓

cause Running gatsby-plugin-emotion v4 or incompatible version causes double imports when using TypeScript.

fix

Upgrade to gatsby-plugin-emotion@5.

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

cause babel-plugin-react-live is not installed as a dependency.

fix

Run yarn add babel-plugin-react-live or npm install babel-plugin-react-live.

Warnings

breaking Currently works only with TypeScript (.tsx) files, not JavaScript (.jsx). ↓

fix Rename .jsx files to .tsx or wait for a future version with JS support.

gotcha Requires gatsby-plugin-emotion v5 for TypeScript support; other versions may cause double imports and break the build. ↓

fix Install gatsby-plugin-emotion@5 and configure it in gatsby-config.js.

gotcha After modifying the Babel plugin (babel-plugin-react-live), you must clean the Gatsby cache, otherwise Webpack/Babel will use a cached version. ↓

fix Run `gatsby clean` before building or developing.

gotcha The plugin is part of the Eufemia design system monorepo; standalone usage may require additional dependencies. ↓

fix Ensure react-live and babel-plugin-react-live are installed as dependencies.

Install

npm install gatsby-plugin-babel-react-live

yarn add gatsby-plugin-babel-react-live

pnpm add gatsby-plugin-babel-react-live

Imports

gatsby-plugin-babel-react-live

wrong

// Wrong: trying to import in a component
import gatsbyPluginBabelReactLive from 'gatsby-plugin-babel-react-live'

correct

// gatsby-config.js
plugins: ['gatsby-plugin-babel-react-live']

This is a Gatsby plugin, not a runtime module. It is added to gatsby-config.js plugins array, not imported in source files.

LiveProvider
wrong
```
import { LiveProvider } from 'gatsby-plugin-babel-react-live'
```
correct
```
import { LiveProvider } from 'react-live'
```
LiveProvider is from react-live, not from this plugin. The plugin transforms code inside LiveProvider at build time.

babel-plugin-react-live

wrong

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

correct

// used internally by the Gatsby plugin; no direct import needed

The underlying Babel plugin is used automatically; do not import it manually.

Quickstart

Configures the plugin in gatsby-config.js to transform code inside LiveProvider components in .tsx files.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-babel-react-live',
      options: {
        componentName: 'LiveCode',
        filesToMatch: ['Examples.tsx'],
        prettierPath: require.resolve('./.prettierrc'),
      },
    },
  ],
}