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

Background

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:

Conclusion

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.

Google Map in React without using packages

React Firebase Authentication

Algorithms: Finding Longest Common Prefix

Use serverless to serve your server-side rendering project (Vue, Quasar)

JSONPath Expressions in Lodr

Kickstart your React Native app with Firebase — Cloud Firestore (Tutorial #1)

10 Basic Fundamental concept of React

React Dropzone and upload images Part 2 install packages

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

A few words on Docker Registries

docker pull

Artgen — First Month’s Summary

FOUNDATION 6 FRAMEWORK

Lemu launches app that allows exploration of the biosphere