🪢

ReactNativeにローカルパッケージを入れる

2023/10/28に公開

1. 別フォルダにローカルパッケージを用意

mkdir my-module
cd my-module
npm init

2. ローカルパッケージをインストール

yarn add link:<パッケージのパス>

普通はこれで動きますが、ReactNatativeの場合は動きません

エラー
error: Error: Unable to resolve module  from :  could not be found within the project or in these directories:

Metroではシンボリックリンクをサポートしていないようです

issueにある解決方法にはこれこれがあるようです
ライブラリのインストールが不要な2つ目の方法を使います

3. package.jsonにnohoistを追加

package.json
"nohoist": [
  "<アプリのフォルダ名>/**"
]

4. metro.config.jsに追記する

metro.config.js
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const path = require('path');

const packagePath = '<ローカルパッケージの相対パス>';

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    extraNodeModules: new Proxy(
      {},
      {
        get: (_, name) => {
          return path.join(__dirname, `node_modules/${name}`);
        },
      },
    ),
  },
  watchFolders: [path.resolve(__dirname, packagePath)],
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Discussion