# Installing NPM Packages for Plugin Development

**URL:** <https://discuss.elastic.co/t/installing-npm-packages-for-plugin-development/237707>\
**Category:** Kibana\
**Created:** [June 18, 2020, 10:32pm UTC](https://discuss.elastic.co/t/installing-npm-packages-for-plugin-development/237707 "2020-06-18T22:32:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![s-newman](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/s-newman/32/70659_2.png) [@s-newman](https://discuss.elastic.co/u/s-newman)\
**Post date:** [June 18, 2020, 10:32pm UTC](https://discuss.elastic.co/t/installing-npm-packages-for-plugin-development/237707/1 "2020-06-18T22:32:10Z")

</div>

I am developing a Kibana plugin for a personal project, and I would like to install an NPM package for my plugin to use. Specifically, I would like to install [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) as a development dependency.

Unfortunately, when I attempt to install the package by running `yarn add eslint-plugin-react-hooks --dev` in my plugin directory, the package is added to the `package.json` and `yarn.lock` files in the root of the Kibana repository - **not** my plugin repository.

I can reliably reproduce this problem by running the following commands to clone Kibana v7.7.1, generate a new plugin, and install a package:

```auto
git clone -b v7.7.1 --depth 1 https://github.com/elastic/kibana.git
cd kibana
nvm use
yarn kbn bootstrap
node scripts/generate_plugin testplugin # Accept the defaults
cd plugins/testplugin
yarn add eslint-plugin-react-hooks --dev

```

Is there a different way to install NPM packages for a plugin? I tried looking around the documentation in the repository and online, but couldn't find anything that seemed applicable.

---

<div class="post-metadata">

**Author:** ![mattkime](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/mattkime/32/43522_2.png) [@mattkime](https://discuss.elastic.co/u/mattkime)\
**Post date:** [June 25, 2020, 1:36am UTC](https://discuss.elastic.co/t/installing-npm-packages-for-plugin-development/237707/2 "2020-06-25T01:36:02Z")

</div>

I'd recommend working in a directory outside of the kibana checkout. Then copy use the `--plugins` argument when starting kibana. `--help` for more info.

---

<div class="post-metadata">

**Author:** ![s-newman](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/s-newman/32/70659_2.png) [@s-newman](https://discuss.elastic.co/u/s-newman)\
**Post date:** [June 25, 2020, 3:21am UTC](https://discuss.elastic.co/t/installing-npm-packages-for-plugin-development/237707/3 "2020-06-25T03:21:13Z")

</div>

Oh, I didn't realize I could pass a path outside the Kibana source tree to the plugin generator. Good to know!

I retried the steps I posted, but once I ran `node scripts/generate_plugin testplugin` with a path outside the Kibana source tree, it fails because the `@elastic/eslint-config-kibana` package hasn't been installed in that project yet. Here's the full output of the command: [https://gist.github.com/s-newman/99a6ca7d0ff1868852f2416b3976ddde](https://gist.github.com/s-newman/99a6ca7d0ff1868852f2416b3976ddde)

However, it looks like all the files for the plugin were generated successfully, and I can now install whatever packages I want. Unfortunately, all the scripts that are normally available for the plugin, like `yarn kbn bootstrap` are no longer available. Also, some of the relative import paths in `public/components/app.tsx` and `server/routes/index.tsx` are generated incorrectly, but I suppose the paths can easily be fixed.

I guess I'm a bit confused. I used the plugin generator once before in v7.5.1, and then a `package.json` was generated with`scripts` and the various (dev)dependencies already set up. Should I be manually creating a `package.json` now?

Sorry if I'm missing something obvious here, I will admit that I'm fairly new to React/Node development.

---

<div class="post-metadata">

**Author:** ![mattkime](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/mattkime/32/43522_2.png) [@mattkime](https://discuss.elastic.co/u/mattkime)\
**Post date:** [June 25, 2020, 4:16am UTC](https://discuss.elastic.co/t/installing-npm-packages-for-plugin-development/237707/4 "2020-06-25T04:16:48Z")

</div>

The tool has been maintained mainly for internal usage since thats where we get most of our feedback so it doesn't surprise me that you're running into problems.

I've created an issue on the kibana repo that you can follow - [https://github.com/elastic/kibana/issues/69876](https://github.com/elastic/kibana/issues/69876) - feel free to leave more feedback on the ticket.

Unfortunately I think for now you'll need to make some manual fixes.

---

<div class="post-metadata">

**Author:** ![s-newman](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/s-newman/32/70659_2.png) [@s-newman](https://discuss.elastic.co/u/s-newman)\
**Post date:** [June 25, 2020, 11:58am UTC](https://discuss.elastic.co/t/installing-npm-packages-for-plugin-development/237707/5 "2020-06-25T11:58:25Z")

</div>

Ah, understood. At any rate, thanks for the help!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 23, 2020, 12:00pm UTC](https://discuss.elastic.co/t/installing-npm-packages-for-plugin-development/237707/6 "2020-07-23T12:00:38Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
