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.

Next.js

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.

Create React App

For apps created with Create React App that have not been ejected, please use Customize CRA to add the plugin.

react-scripts version 3.x or higher required

If you are using react-scripts version 1.x or 2.x, you will need to upgrade to version 3.x for the above to work.

Look in your package.json to see which version you have.

Install customize-cra and its dependency react-app-rewired:

npm

npm install --save-dev customize-cra react-app-rewired

Yarn

yarn add --dev customize-cra react-app-rewired

pnpm

pnpm add --save-dev customize-cra react-app-rewired

Create a new start script that will be used just for MightyMeld:

package.json

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "start:mightymeld": "react-app-rewired start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

Create a config-overrides.js file next to your package.json file:

config-overrides.js

const { addBabelPlugins, override } = require('customize-cra');
module.exports = override(...addBabelPlugins('@mightymeld/runtime/babel-plugin-mightymeld'));

Update the run entry in your mightymeld.json file as follows:

mightymeld.json

{
  ...
  "run": "npm run start:mightymeld", // Adjust if you use yarn, pnpm, etc.
  ...
}

Vite

Update your Vite config file to conditionally add the plugin:

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

const conditionalPlugins = [];

if (process.env.MIGHTYMELD) {
  conditionalPlugins.push('@mightymeld/runtime/babel-plugin-mightymeld');
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [...conditionalPlugins]
      }
    })
  ]
});

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

Other Frameworks

tip

These instructions will work if you have ejected from CRA.

If you DO NOT have a babel.config.js file

Create a babel.config.js file in the root of your project:

const babel = {};

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

module.exports = babel;

If you have a babel.config.json or .babelrc.json file

First convert your existing file from JSON to JavaScript so you can make the conditional check for MIGHTYMELD.

If your existing config file looks like this:

babel.config.json

{
  "presets": [...],
  "plugins": [...]
}

Convert it to JavaScript like this:

babel.config.js

const babel = {
  presets: [...],
  plugins: [...]
};

module.exports = babel;

Then add the MightyMeld plugin:

babel.config.js

const babel = {
  presets: [...],
  plugins: [...]
};

if (process.env.MIGHTYMELD) {
  babel.plugins.push('@mightymeld/runtime/babel-plugin-mightymeld');
}

module.exports = babel;

If you have a babel.config.js file

If your existing config file looks like this:

babel.config.js

module.exports = {
  presets: [...],
  plugins: [...]
};

First use a variable to store the config so you can modify if conditionally:

babel.config.js

const babel = {
  presets: [...],
  plugins: [...]
};

module.exports = babel;

Then add the MightyMeld plugin:

babel.config.js

const babel = {
  presets: [...],
  plugins: [...]
};

if (process.env.MIGHTYMELD) {
  babel.plugins.push('@mightymeld/runtime/babel-plugin-mightymeld');
}

module.exports = babel;

If your framework does not use Babel, or does not recognize the babel.config.js file

We have experience setting up MightyMeld on other frameworks, such as Remix, and Umi. If you are using a framework for which you don’t see instructions here, please contact us and we’ll help you get set up.