CRAアプリ＋Reactライブラリ開発

CRAアプリとReactライブラリを同時に開発したい
結論：アプリ側はyarn v2にするのが良さそう。

ファイルプロトコルで参照

ローカルのライブラリをinstall

> yarn add file:../react-lib

package.json

  "dependencies": {
    "react-lib": "file:../react-lib",

./node_modules/react-libにコピーされる。
ただし、ライブラリ側を修正を反映する場合は、
削除して入れ直す。

> rm -rf ./node_modules/react-lib
> yarn --check-files

./node_modules/react-lib
は更新されてるのにアプリに反映されないときがあった。
一回キャッシュクリーンしたらそれ以降反映されるようになった。
なんでだろう。。

> yarn cache clean

yarn linkで簡略化

もっと簡略化するためにyarn linkを使う

ライブラリをシンボリック先にする
ライブラリフォルダ下で

> yarn link

CRAアプリフォルダ下で

yarn link react-lib

これで
./node_modules/react-lib
がシンボリックリンクで直接react-libを参照するようになる。

react-lib側を変更するだけで、
CRAアプリのDevServerに即時反映されるようになった。

なんかリンク先がpackage.jsonで管理されてないのが微妙かも。
色々やってみる。

一回まっさらにして

> yarn unlink react-lib
> yarn remove react-lib

react-lib下で

> yarn unlink

これでリンク先も削除される

protocol linkでやってみる

> yarn add link:../react-lib

こうなった。

package.json

  "dependencies": {
    "react-lib": "link:../react-lib",

これだとライブラリ側修正したら即時反映。
node_modules下が更新されているから
裏側でシンボリックリンク貼ってるのか。
package.jsonに管理されてるし、こっちの方が良いかも。

portalとの違いは何なのか。

> yarn remove react-lib
> yarn add portal:../react-lib

エラーになった。portalはyarn1にはないのか。

linkはpackage.json見ないと書いてる。
resolutionsでライブラリが依存してるパッケージのバージョン指定したりそんなのは無理ということか。
package.jsonのmainとかは効いてるので、依存関係解決の時の話。
それを解決できるのがportalでこれはv2から登場。

なるほど。
そこで困ったのが、ライブラリ側でHooks使う時。
ブラウザでエラーになった。

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

アプリとライブラリ別々にReact使ってるから3番に該当してエラーになったんだろう。

最初のfileプロトコルでも同じエラー。
キャッシュにコピーとしか書いてないから依存関係は見ないんだろう。

yarn v2

portalを使うため、アプリ側をyarn v2にしてみる。
手順はこちら

v1のように

yarn add portal:../react-lib
だとエラーになった。
これで成功

> yarn add react-lib@portal:../react-lib

package.json

  "dependencies": {
    "react-lib": "portal:../react-lib",

ライブラリを更新する度にDevServerに反映されるようになった。
ライブラリ側でHookも使えるようになった。
yarn v1でうまくやる方法は見つからず。

※CRAアプリ側 yarn2にしたら修正してDevServerに反映するときに以下のエラーが発生するようになってしまった。
Failed to load config "react-app" to extend from

どうもeslint-config-react-appのEslintのconfigが読み込めてないようだが
そもそもCRAのデフォルトのままで、依存関係直下になかったから本来この動きが正しいらしい。。

これで解決した。

> yarn add -D eslint eslint-config-react-app