Using Metro4-React with CRA

Hi, my friends!

In this post, I’ll show you how to use Metro4-React in an application created using create-react-app without ejecting configs.

Remarks

Metro4-React published in the npm registry with raw JSX files. When creating an application using CRA and Metro4-React and trying to compile it, we get a syntax error, since Babel does not compile files located in node_modules. To solve this problem, you can run the react-scripts eject command, and then fix the configuration files, but we will not do this.

Add tools

We will use 2 utilities in order to override the configurations we need: customize-cra and react-app-rewired. Add them to devDependencies:

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

Create ovveride config

To use thes utils, you must create special config file with name config-overrides.js on root folder with same level with package.json.

Rewite Bable include

Add code below to config file.

const {
    override,
    babelInclude
} = require("customize-cra");
const path = require("path");

module.exports = override(
    babelInclude([
        path.resolve("src"),
        path.resolve("node_modules/metro4-react")
    ])
);

Change package.json

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

Thats all. Now you can add Metro4-React components to your app and compile it.

You can start dev server

yarn start

or build production with

yarn build