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

  • 投稿日
  • 更新日
  • 著者 potara
  • カテゴリー まとめ

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:

  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

修正できることの確認

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

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:

  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.

リンク先に書いてあるとおり、Reactもlinkする必要があるようです。

> cd my-project
> npm link ../kintone-ui-component/node_modules/react
> npm run build

これで完了です。効率的に開発できますね。

npm installでリンクを解除できます。

> cd my-project
> npm install
kintone UI Component

この記事を書いた人

potara

記事一覧