Create React App で yarn link したパッケージを使う
Posted on
開発中の npm パッケージをローカルの別プロジェクトで使いたい場合は yarn link することでパブリッシュせずに参照することができます。
仕組みとしては yarn link で ~/.config/yarn/link にシンボリックリンクを作成し、別プロジェクトで yarn link [package] すると node_modules 以下に ~/.config/yarn/link/[package] へのシンボリックリンクが作成されます。
しかし、Create React App (CRA) で作られたアプリケーションで yarn link したパッケージを使おうとすると、なぜか読み込まれずにコンパイルが失敗しました。
CRA はプロジェクトルート外からのインポートを防ぐ
デフォルトでは、CRA はプロジェクトルート外からのインポートを防いでいます。これは CRA に含まれている react-dev-utils パッケージの ModuleScopePlugin というプラグインで実現されているようです。
This webpack plugin ensures that relative imports from app's source directories don't reach outside of it.
customize-cra パッケージを使ってこのプラグインを無効化する方法もあるようですが、最近はメンテナンスされていないようなので別の方法を探ることにしました。
webpack の resolve.symlinks を変更する
webpack のドキュメントを探っていると resolve.symlinks という設定を見つけました。
Whether to resolve symlinks to their symlinked location.
When enabled, symlinked resources are resolved to their real path, not their symlinked location. Note that this may cause module resolution to fail when using tools that symlink packages (like
npm link).
上記の説明のとおり、この設定を false にすればシンボリックリンクがあるパスで解決されそうです（要するに node_modules/[package]）。しかし、CRA では webpack の設定は隠蔽されており直接変更することはできません。
幸いこのプロジェクトではすでに CRACO を使っていたので、craco.config.js に以下の設定を追加することで解決しました。
// craco.config.js
module.exports = {
// ...
webpack: {
configure: {
resolve: {
symlinks: false,
},
},
},
};
以下のページを参考にさせていただきました。