Skip to main content

Babel Plugin

In order for MightyMeld to understand your code, you need to run our Babel plugin. This plugin only needs to be run in environments where you plan to use MightyMeld, such as your local development environment or a server designated for designers to use MightyMeld on. It adds considerable weight to the build, we recommend not running it in production.

Make sure our npm package is installed as described in Quick Start. Then, configure your app to run the plugin. This part is different depending on the framework you’re using and how your app was created.

Make it conditional

Configure the Babel plugin to only load when the MIGHTYMELD environment variable is set. This variable is automatically set when MightyMeld runs your app.

Create a babel.config.js at the top of your app. Once this file exists, Next.js will use it as the source or truth for Babel, so it needs to define what Next.js needs as well, which is the next/babel preset.

// Base config needed by Next.js
const babel = {
presets: ['next/babel']

if (process.env.MIGHTYMELD) {
babel.plugins = ['@mightymeld/runtime/babel-plugin-mightymeld'];

module.exports = babel;

If you already have a babel.config.js, see the "Other Frameworks" section for help extending your config file.