kintone UI Componentにプルリクエストする

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:
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://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

修正できることの確認

プルリクエストは当てずっぽうではだせないので、事前に手元で修正されることを確認する必要があります。
ここではその流れを説明するので、詳細がわからない方はググって下さい。

1. GitHub

• kintone UI Componentをforkする

2. Git(kintone UI Component)

• forkしたリポジトリをcloneする(git clone https://github.com/xxxx)
• branchを作成(git checkout -b ブランチ名)
• 原因と思われる箇所を修正する
• git commit -a
• git push origin ブランチ名

ここまでの手順で修正版kintone UI Componentを自分のリポジトリに反映できました。
次は自分のプログラムに上記のリポジトリを読み込んでDropdownが表示されるようになるかを確認します。

Git(自プログラム）

• npm uninstall @kintone/kintone-ui-component
• npm install ユーザー名/kintone-ui-component#ブランチ名
  • 例）npm install potaracom/kintone-ui-component#fix-dropdown

この手順で組み込めたのでReactが1つになっているかを確認します。

$ npm ls react react-dom
+-- react@16.8.6 
`-- react-dom@16.8.6 

ばっちりです。
あとはプログラムをビルドしてDropdownが表示できるか確認します。

という手順で、できあがったプルリクエストがこちらです。
果たしてマージされるでしょうか・・・

9/26追記：マージされたバージョンがリリースされました！