Installing plugin in Kibana 7.8

Elastic Stack Kibana
1

I've been working on creating a custom plugin in Kibana 7.8. I've got it working but I'm having problems doing a yarn build so I can install the plugin on our dev server. Following the steps lined out here: https://github.com/elastic/kibana/issues/70426, I was able to get my plugin to install and run on the dev server. However, if I install other node packages in my plugin, I get es2015 errors for the installed package. For example, if I install the uuid node package as a dependency for my plugin and then run the node scripts/build_kibana_platform_plugins I get the following error:

ERROR in ./node_modules/uuid/dist/parse.js
       │          Module parse failed: disallowed syntax found in file /kibana/plugins/custom_filter_bar/node_modules/uuid/dist/parse.js:
       │            - [es2015] let/const variable declaration
       │          You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
       │          Error: disallowed syntax found in file /kibana/plugins/custom_filter_bar/node_modules/uuid/dist/parse.js:
       │            - [es2015] let/const variable declaration
       │              at parser.hooks.program.tap.program (/kibana/packages/kbn-optimizer/src/common/disallowed_syntax_plugin/disallowed_syntax_plugin.ts:64:17)
       │              at SyncBailHook.eval (eval at create (/kibana/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
       │              at Parser.parse (/kibana/node_modules/webpack/lib/Parser.js:2280:26)
       │              at doBuild.err (/kibana/node_modules/webpack/lib/NormalModule.js:482:32)
       │              at runLoaders (/kibana/node_modules/webpack/lib/NormalModule.js:358:12)
       │              at /kibana/node_modules/loader-runner/lib/LoaderRunner.js:373:3
       │              at iterateNormalLoaders (/kibana/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
       │              at Array.<anonymous> (/kibana/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
       │              at Storage.finished (/kibana/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
       │              at provider (/kibana/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
       │              at /kibana/node_modules/graceful-fs/graceful-fs.js:115:16
       │              at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
       │           @ ./node_modules/uuid/dist/index.js 77:36-57
       │           @ ./public/components/editor.js
       │           @ ./public/custom_filter_bar_vis_type.tsx
       │           @ ./public/plugin.ts
       │           @ ./public/index.ts

I found this forum post (New Platform Plugin - disallowed syntax found) about a similar issue and it states I may need to add more to the build parameter of my package.json file but I've not gotten anything to work. Does anyone have any suggestions to get third party node modules working in a Kibana 7.8 plugin?

Here's my current package.json file:

{
   "name": "custom_filter_bar",
   "version": "1.0.0",
   "description": "Allows user to create custom filters displayed in a filter bar",
   "kibana": {
      "version": "7.8.0"
   },
   "scripts": {
      "kbn": "node ../../../../scripts/kbn.js",
      "build": "plugin-helpers build"
   },
   "devDependencies": {
      "@kbn/plugin-helpers": "link:../../packages/kbn-plugin-helpers"
   },
   "dependencies": {
      "lodash": "^4.17.20",
      "uuid": "^8.3.2"
   }
}
2

Do you have a hard requirement to develop against 7.8? The external plugin development tooling has been improved a lot in 7.10 so I would highly recommend you start with that. You can follow the documentation here https://www.elastic.co/guide/en/kibana/current/plugin-tooling.html

3

Unfortunately yes I do have a hard requirement for 7.8. This is being developed for a government contract and they require 7.8. I've looked at 7.10 and things do appear to work better for plugin development with 7.10 but I have to get it working with 7.8.

I'm also getting these errors when starting Kibana after developing my plugin. If I remove the dependencies object from the package.json file, then my plugin loads and runs on my development copy of Kibana 7.8. I guess my question is do I have to do an npm install of the other node modules? It appears I do not.

4

@ssimmons it would help a lot if you're able to put up a repository with your plugin's source code (or if it's proprietary a minimal example).

@spalger Could you please take a look? Building plugin in Kibana 7.8.0 seems to contain related information and @ssimmons was unable to use 7.10 to build a 7.8 plugin.

5

@ssimmons the disallowed syntax plugin is intended to spot node_modules which have syntax which isn't valid with IE or order browsers. Based on thecompatibility tables it seems that let and const are actually supported in IE 11, which is why the IE support claim on the UUID readme seems valid, but we're a ways beyond making modifications to 7.8 so I don't think we're going to be able to safely update the plugin to allow this version of uuid for use in the browser.

Would you mind using the same version that Kibana is using? We use 3.3.2 which supports generating UUIDs just fine.

6

@spalger thank you for the suggestion. After changing the uuid version to 3.3.2, it did work. I also had the same issue with a different plugin but changed the version to a previous one and that one appears to be working now too. So I'm assuming if I see this same error again, I just need to keep trying older version of the plugin until I can get it to work? Thanks again for the suggestion. I need to do some more testing to verify, but this does appear to work.

7

If you try to use another module from NPM which uses const/let syntax then Kibana will prevent that module from being built into the bundles. Switching to a module which doesn't use that syntax is the solution, sometimes that might be an older version of the module which still has the features you need, other times you might need to look for a different module which supplies the features you need but uses the right syntax.

I guess what I'm trying to say is yes-mostly, since older versions of a module from NPM might also use disallowed syntax, have security issues, or not have the features you need from the module.

8

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