Table of contents⌗

  1. Introduction.
  2. How to fix.
  3. Conclusion.

Introduction⌗

create-react-app is a tool that is used to generate a react project. When you are building tools in different repositories, you might want to use the build files from one external repo into your react application. However, create-react-app blocks referencing external files in a react project.

This import will not work.

import {SomeExternalFunc} from '../../packages/utils/dist'

If you have a project structure like this:

.
├── README.md
│   └── default.md
├── config.toml
├── src
│   ├── packages
│   │   └── utils
|   |       └── dist
│   │   └── utils
│   ├── samples
│   │   └── react-app
|   |       └── src

How to fix⌗

You need to use the react package.json file to fix this. Update the dependencies of the file to this:

"dependencies":{
  "@my-external-tools/utils": "file:../../../packages/mgt-element/dist",
  ... rest of the dependencies
}

Then in the react project file that you are working in, import the dependencies as usual:

import {SomeExternalFunc} from '@my-external-tools/utils';

// Use SomeExternalFunc as usual

Conclusion⌗

This is an easy fix. There are other fixes which involve having new dependencies. You can explore them if this is not working for you.