Skip to main content

Plugin Overview

What is the plugin?​

The MightyMeld plugin is a Babel or SWC plugin that instruments your code with source locations (file name, line number, etc.) so that MightyMeld can find the original source code for elements after they have been rendered in the browser. Most frameworks provide this information out of the box, so you probably don’t need to install the plugin (see “Should I install the plugin” below).

If you need the plugin, load either the Babel plugin mightymeld/babel-plugin-mightymeld or the SWC plugin @mightymeld/swc-plugin depending on which of those technologies your app uses.

The plugin only needs to be run in environments where you plan to use MightyMeld, such as your local development environment. We recommend running it only when the MIGHTYMELD environment variable is set.

Always use run with plugin

If you install the plugin, you should always use the run setting so that MightyMeld runs your app, rather than starting your app first, then starting MightyMeld in another terminal.

When MightMeld starts your app, it sets the MIGHTYMELD environment variable, which you can use to decide if you will run the plugin. MightyMeld also attempts to delete cached builds of your app that do not include the instrumentation added by the plugin.

Should I install the plugin?​

Only install our plugin if you know it is required for your app to work with MightyMeld. Many apps do not require the plugin. If you can see your app running inside MightyMeld studio, but you cannot select many (or any) elements, then you may need to install the plugin.

Before you install the plugin, check this list of known issue below.

Known issues​

These are the common situations in which you will need to install the plugin.

Next.js​

Many Next.js projects render some or all of their components on the server. This feature is called React Server Components (RSC) and is sometimes refered to as Server Side Rendering (SSR). There is a known issue where components rendered on the server are missing the source locations MightyMeld needs.

There are two workarounds for this issue:

  1. Add the "use client" directive to the top of your page.jsx file. This fix will force your entire app to be rendered on the client, which is not a good solution for production apps, but it is a fast and easy solution that will get MightyMeld working. We recommend this as a temporary fix for evaluating MightyMeld or for apps that do not benefit from server side rendering.

  2. Install the MightyMeld plugin. Follow the instructions on this page.

Vite 4.x​

Vite 4.x has a bug where the source locations are incorrect. We recommend upgrading to Vite 5 or higher, which should fix this issue. If you cannot upgrade Vite, you can install the plugin (see below).

Plugin install instructions​

Which framework am I using?​

The easiest way to tell is by checking your package.json scripts. Each framework uses a specific command:

  • Vite uses vite.
  • Next.js uses next.
  • Create React App uses react-scripts.

Which plugin should I use?​

Babel is the traditional compilation tool for web projects. SWC is much faster but much newer, and plugin support is still experimental. We'd suggest using whichever plugin matches your current build tools.