Reusing component from another create-react-app app with Babel, react-app-rewired


This is my scenario, I have an React app 1 that already have some template components, and in a new React app, I would like to reuse them.

Trial 1 — Referencing App1 from App2

As App1 is outside App2 folder, the way to make App2 able to reference App1 by adding a softlink in App2’s package.json dependencies block like following:

"dependencies": {
"ref_name": "file:<path/to/folder>",

Then in App2, one can import like:

import * from ref_name

*some people suggest using “yarn link” approach, but seems not working for me.

Problem 1 — JSX not supported (here comes babel)

The reason is very simple, when App2 try to compile, it see jsx from App1 source code, which is not handled by create-react-app.

One need to transpile the React code into JavaScript code with Babel.

My solution is:

  1. At App1, add devDependencies @babel/core, @babel/cli, babel-preset-react-app
  2. go to App1 (the code that’s being referenced), then run:
NODE_ENV=development BABEL_ENV=development node node_modules/@babel/cli/bin/babel.js -d dist --presets=babel-preset-react-app src

The 2 environment variable NODE_ENV and BABEL_ENV are required by babel, which could be either “development” or “production”

Then run the babel-cli entry point (babel.js in above path), with “-d” to define output path, and use preset “babel-reset-react-app”

The final argument is the “src” folder which is the input for babel transpile.

Afterwards, it would create the “dist” folder with all files from App1 transpile (convert) to normal JavaScript.

Problem 2 — Relative reference of images or css

In App1, there are some image and css file that’s being imported in “assets” folder within “src” folder like below.

And those files are not JavaScript file and not managed by babel, and so the folder is missing in the dist folder, the solution would be create a soft link inside the dist folder to reference to src/assets

The command is as follow (assume we are inside “dist” folder, which is sibling to “src” folder)

ln -s ../src/assets/ ./assets

Problem 3 — Invalid hook call (actually is multiple react in same app)

The problem is because App1 and App2 both have their own react, they might have different version.

My solution is to leverage webpack alias, but given create-react-app manage the webpack (and I do not want to eject from create-react-app), so I leveraged the “react-app-rewired” together with “customize-cra” packages, and adding the “config-overrides.js” as below:

This make all react reference to the App2’s react package.

Solution credits goes to:


This is…well, 50/50 on challenging/frustration, and through this experience, helped me to understand more on the babel, create-react-app and react compiling…

Hope this helps someone.




Love podcasts or audiobooks? Learn on the go with our new app.

Making a Web-based Flappy Bird Clone with p5.js | Part 3

Let’s Build: Cryptocurrency Native Mobile App With React Native + Redux — Chapter IV

Obsidian — Custom Plugins Part 1

Let some chit-chat about String and Array of JavaScript……

Automated Responsive Images Using React and Cloudflare Images

Puppeteer — Click All Cookie Popups

Productive tools can be observed

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stephen Cow Chau

Stephen Cow Chau

More from Medium

Issues i faced with Strapi

Choosing the JavaScript ecosystem for a large scale enterprise app in 2022

A meme representing an excited expression (oh boy !)

Demo: an item usage-tracking app to promote sustainability

Ionic for Building a Website