Skip to main content

Create React App

tip

Many applications do not require this plugin. Unless you have been directed here by other documentation, you can probably skip these instructions. See “Should I install the plugin?” for more information.

caution

These instructions are for apps created with Create React App that have not been ejected. If you have ejected your app, please see these instructions.

react-scripts version 3.x or higher required

Check your package.json for the version of react-scripts you are using. If it’s 1.x or 2.x, you will need to upgrade to version 3.x for these instructions to work.

We’ll be using Customize CRA to add the plugin. Install customize-cra and its dependency react-app-rewired:

npm install --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", // make sure to include any flags from your original start command e.g. --open-ssl-legacy-provider
    "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.
  ...
}