Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including babel-plugin-preact-fragment with all npm packages installed. Try it out:

var babelPluginPreactFragment = require("babel-plugin-preact-fragment")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

babel-plugin-preact-fragment v1.1.1

babel plugin to add React Fragment support in preact

React.Fragment babel transpiler for preact applications Known Vulnerabilities

Important

This plugin will only remove the Fragment element if there's only one children. This can be helpfull if you're rendering a SVG element which gets broken with the <undefined /> wrapper.

If there's multiple children this plugin will skip transformation.

Usage

Download

yarn add babel-plugin-preact-fragment -D
# or
npm i babel-plugin-preact-fragment --save-dev

Config your build pipeline

babel

In your babel config:

plugins: [
  'preact-fragment',
  ...
]

webpack with babel-loader

Be sure to include the code that's using React.Fragment, probably it's from node_modules.

{
  test: /\.(jsx|js)?$/,
  include: [
    path.resolve('src'),
    // Below is the module who's using React.Fragment
    path.resolve('node_modules/@material-ui/icons'),
  ],
  use: 'babel-loader'
},

Covered use cases

Checkout tests/index.js (and the tests/fixtures dir) to see what this plugin is covering. If you find any cases where it's not working, you're welcome to file an issue.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free