Skip to main content

Linking Local Modules

Note: The frontend docs contain some of the best up to date information on this topic.

It is often necessary to link a local copy of a module to the react-native project. This guide explains how to do that.

Build steps, install steps, tooling and workflows will be different between packages. This guide aims to be generic, but includes a specific example as explained below.

  • In this document, top level dot points are generic and apply to all packages
    • The next level dot points are the actual commands used to link @technology/group-mode to react-native, so that we also have a practical example

Setup​

In package being linked​

  • Run install scripts
    • npm i
  • Run build steps
    • npm run build:package
  • Remove problem packages
    • When linking locally like this, some packages are not 'de-duped' properly
    • eg. rm -rf node_modules/react && rm -rf node_modules/react-redux
    • This can also be done by adding more alias's in the babel config of the target package.
    • EG react: path.resolve(__dirname, 'node_modules/react'),

In react-native​

  • Create the link
    • In the resolutions field of package.json, add a relative path to package you want to link
"resolutions": {
  "hermes-engine": "~0.10.0",
  "react-devtools-core": "^4.23.0",
  "@technology/group-mode": "link:../group-mode"
}
  • Tell Metro to watch this directory
    • In metro.config.js, add an absolute path to the package being linked in watchFolders
    • resolve('/Users/thomas.mcintosh/Documents/dev/group-mode')
  • Start Metro
    • yarn ladbrokes

Cleanup​

In package being linked​

  • (Optional) Remove the global link
    • yarn unlink

In react-native​

  • Remove the link
    • Delete your package.json:resolutions field entry
  • Tell Metro to stop watching this directory
    • In metro.config.js, remove the absolute path in watchFolders
  • Remove all modules
    • rm -rf node_modules
  • Run install scripts
    • yarn setup

Development Workflow​

  • Make a change to the linked package
  • Run build steps
    • npm run build:package
  • Metro may crash, as build steps can modify and move files
  • Metro will restart the app, and the changes will be in effect

Alternative​

If you did above steps​

  • (Optional) Remove the global link
    • yarn unlink

Install yalc​

install yalc by npm i yalc -g

  • check here for more details

Development Workflow In package being linked​

  • Make a change to the linked package
  • Update version in package.json to something unique that will work for your local
  • Run rm -rf dist/ && npm run build:package && yalc remove --all && yalc publish
  • That will do the following
    • Delete .dist folder
    • Build project running build:package (that recreates .dist folder, delete dist every time you build otherwise @types updates do not come through)
    • Make project available using yalc publish that will output something like @technology/group-mode@your-version published in store.

native-app:​

  • In the repo where you want to test your changes run yalc add @technology/group-mode@your-version
  • yarn setup and restart metro

Cleanup​

In react-native​

yalc remove @technology/group-mode