Installing NPM Packages for Plugin Development

[s-newman (Sean Newman)]

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

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.

[mattkime (Matthew Kime)]

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.

[s-newman (Sean Newman)]

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

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 withscripts 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.

[mattkime (Matthew Kime)]

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 - feel free to leave more feedback on the ticket.

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

[s-newman (Sean Newman)]

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