Featured Image(Photo) by Luke Chesser on Unsplash
はじめに
kintone UI ComponentのJavaScript版を使っていたのですが最近React版に乗り換えました。QuickStart Reactの手順で問題なくButtonは表示できましたが、Dropdownを表示すると以下のエラーが発生したのでプルリクエストしました。
Uncaught Invariant Violation: 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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
kintone UI Componentは非常に便利なライブラリなので多くの方に使ってほしい!そして多くの方にプルリクエストしてほしい!と思っているのでその手順をまとめます。
エラーの内容確認
エラーメッセージが表示してくれているページを確認すると何やら3つぐらい原因の候補がありそうです。ググったり、試行錯誤した結果、同じアプリ内に2つ以上のReactが含まれていることが原因の可能性であることがわかりました。
$ npm ls react react-dom +-- @kintone/kintone-ui-component@0.3.5 | +-- react@16.8.6 | `-- react-dom@16.8.6 deduped +-- react@16.8.6 `-- react-dom@16.8.6
修正できることの確認
プルリクエストは当てずっぽうではだせないので、事前に手元で修正されることを確認する必要があります。ここではその流れを説明するので、詳細がわからない方はググって下さい。
GitHubリポジトリを利用する方法
GitHub
kintone UI Componentをforkします。
2. kintone UI Component
forkしたリポジトリをcloneします。
> git clone git@github.com:xxx/xxxxx.git
次にkintone UI Componentのプログラムを修正してビルドします。
> npm install
> git checkout -b branch-name
// modify
> npm run build
> git commit -a
> git push origin branch-name
ここまでの手順で修正版kintone UI Componentを自分のリポジトリに反映できました。次は自分のプログラムに上記のリポジトリを読み込んでDropdownが表示されるようになるかを確認します。
自分のプログラム
- npm uninstall @kintone/kintone-ui-component
- npm install –save ユーザー名/kintone-ui-component#ブランチ名
- 例)npm install –save potaracom/kintone-ui-component#fix-dropdown
この手順で組み込めたのでReactが1つになっているかを確認します。
$ npm ls react react-dom +-- react@16.8.6 `-- react-dom@16.8.6
ばっちりです。あとはプログラムをビルドしてDropdownが表示できるか確認します。という手順で、できあがったプルリクエストがこちらです。果たしてマージされるでしょうか・・・
ローカルフォルダを参照する方法
上記の「GitHubリポジトリを利用する方法」ではGitHubにpushして、npm installして確認するという手順が必要です。とても面倒なのとnpm linkという方法が簡単だったので紹介します。
まずはkintone UI Componentを使いたいプロジェクトに移動して、fork & cloneしたkintone UI Componentにリンクを貼ります。
> cd my-project
> npm link ../kintone-ui-component
次にkintone UI Componentのプログラムを修正してビルドします。
> npm install
> cd kintone-ui-component
> git checkout -b branch-name
// modify
> npm run build
あとは自分のプロジェクトをビルドするだけです。
> cd my-project
> npm run build
修正が反映されてるはず。と思って画面を開いたらこんなエラーが出ました。最初のエラー内容と同じなのでややこしいですが・・・
Uncaught Invariant Violation: 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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
リンク先に書いてあるとおり、Reactもlinkする必要があるようです。
> cd my-project
> npm link ../kintone-ui-component/node_modules/react
> npm run build
これで完了です。効率的に開発できますね。
npm installでリンクを解除できます。
> cd my-project
> npm install