Registry / web-framework / gatsby-plugin-babel-react-live

gatsby-plugin-babel-react-live

library1.4.5jsnpmunverified

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.

web-framework devops

npm install gatsby-plugin-babel-react-live

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GATSBY-PLUGIN-BABE

gatsby-plugin-babel-react-live

web-frameworkjavascriptv1.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.

gatsby-plugin-babel-react-live

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

✗ // Wrong: trying to import in a component import gatsbyPluginBabelReactLive from '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

✓ import { LiveProvider } from 'react-live'

✗ import { LiveProvider } from 'gatsby-plugin-babel-react-live'

LiveProvider is from react-live, not from this plugin. The plugin transforms code inside LiveProvider at build time.

babel-plugin-react-live

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

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

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

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'), }, }, ], }

Debug

Known issues

breakingCurrently works only with TypeScript (.tsx) files, not JavaScript (.jsx).

fix

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

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

Errors

Common errors & fixes

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

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.

Duplicate import of 'react'

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

fix

Upgrade to gatsby-plugin-emotion@5.

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

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

Upgrade

Version history

1.4.5latest on npm

Audit

Dependencies

gatsbyrequiredGatsby plugin, requires Gatsby to be installed

react-liverequiredProvides LiveProvider and related components

gatsby-plugin-emotionoptionalRequired for TypeScript support, specifically version 5

Agent activity

4 hits · last 30 days

node

Resources

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

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

homepagehttps://eufemia.dnb.no ↗