Building plugin in Kibana 7.8.0

Elastic Stack Kibana
1

I've built my own plugin in Kibana 7.8.0. I'm now trying to do a yarn build command to build the plugin so I can install it on our dev server. I created the plugin using the node scripts/generate-plugin command. However, this script does not create a package.json file. I've done these same steps in Kibana 7.5 and it does create the package.json file will all the dependences like it does in Kibana 7.5. Is this something that 7.8 does not do? I'm assuming I need a package.json file for the yarn build command to work because it currently tries to build all of Kibana when I run that command. I found another forum post discussing a bug in Kibana 7.8 when trying to build a plugin:

https://discuss.elastic.co/t/problem-with-build-dev-kibana-plugin-in-7-8/247046

They state to add some things to the package.json file but I don't have a package.json file when generating my plugin. Should I?

2

Upgrading to 7.10 an option? This will fix your build issues.

Well in 7.10 the plugin generator creates the package.json for you and also the build process works better.

3

Unfortunately I cannot upgrade to 7.10 as the production server is a government server and our contract with them requires Kibana 7.8. I'm currently running the Kibana development environment in a Docker container. I'm using the Kibana git repo (https://github.com/elastic/kibana.git) and checking out branch 7.8.0. Is there another branch I can switch to for 7.8 that has the fix for the generate_plugin script? One that will still allow my plugin to run on version 7.8.0 Kibana? Or can I run the generate_plugin script for 7.10 on 7.8?

4

If I had to try this I would install 7.10 somewhere and generate a plugin that targets 7.8 and then do your yarn build when done on the 7.10 version (build process works in 7.10 flawlessly). After that you install it on your production server for 7.10.

You can get this to work with 7.8 just so you know. It just requires digging into GitHub issues and doing all the workarounds. Hope this helps.

5

Thanks. I'll try that route and see if the plugin works on the 7.8 production server.

6

I was able to install Kibana 7.10 and created a test plugin. However, it appears the generate-plugin.js script in Kibana 7.10 does not ask which version of Kibana you want to target. So I'm not seeing how to target Kibana 7.8 from Kibana 7.10 plugin generation. I guess I'll have to try to get this to work in 7.8. Since 7.8.0 does not create a package.json file, is there a standard one I can use for 7.8.0 that I can modify with the proper build dependences? I have Kibana 7.5 installed but I'm not sure a 7.5 package.json file will work in 7.8. Or is there a version of 7.8 I can install that does create a package.json file that I can then modify? This is all pretty frustrating.

7

kibana.json

{
  "id": "brewAnalytics",
  "version": "1.0.0",
  "kibanaVersion": "kibana", <----- Change to 7.8
  "server": true,
  "ui": true,
  "requiredPlugins": ["navigation"],
  "optionalPlugins": [ "security" ]
}

I haven't fully test that but it will create a plugin called name.7.8.zip which should work. I am testing this today also but I think this should work.

8

I don't think that will work. I created a test plugin in Kibana 7.10 and then modified the kibana.json file to set the "kibanaVersion" to "7.8.0". I then ran yarn build from the test plugin directory and got this error:
ERROR These tools are not designed to work with version before 7.9, please checkout an earlier version of Kibana to build your plugin

9

I'm trying to get this working in 7.8 with the work arounds provided in github. I've been able to create a package.json file that contains:

{
   "name": "test_plugin",
   "version": "0.0.0",
   "description": "Test Plugin",
   "kibana": {
      "version": "7.8.0"
   },
   "scripts": {
      "build": "plugin-helpers build"
   },
   "devDependencies": {
      "@kbn/plugin-helpers": "link:../../packages/kbn-plugin-helpers"
   }
}

And a .kibana-plugin-helpers.json that contains:

{
   "buildSourcePatterns": [
     "package.json",
     "yarn.lock",
     "{public,server}/**/*",
     "kibana.json"
   ]
 }

I can then do a yarn build but this will not work once installed on the dev sever because the bundles have not been built for it. According to github (https://github.com/elastic/kibana/issues/70426) I need to manually run the optimizer and include the generated files in the plugin by running the following commands:

mkdir -p kibana/plugin_name/target/public
node ../../scripts/build_kibana_platform_plugins --verbose --no-examples
mv target/public/* kibana/plugin_name/target/public/
zip -ur build/plugin_name-*.zip kibana/plugin_name/target/public

When I run the following command node ../../scripts/build_kibana_platform_plugins --verbose --no-examples from my test plugin directory I get the following error message:

ERROR in ../maps/public/index.scss?dark (/kibana/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-0-1!/kibana/node_modules/postcss-loader/src??ref--5-oneOf-0-2!/kibana/node_modules/resolve-url-loader??ref--5-oneOf-0-3!/kibana/node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-4!../maps/public/index.scss?dark)
       │          Module build failed (from /kibana/node_modules/sass-loader/dist/cjs.js):
       │          SassError: File to import not found or unreadable: src/legacy/ui/public/styles/_styling_constants.
       │                  on line 6 of /kibana/x-pack/plugins/maps/public/index.scss
       │          >> @import 'src/legacy/ui/public/styles/_styling_constants';

Any suggestions on how to correct this SassError? It says it's a webpack issue.

*** Update ***

I was able to fix this error by modifying the /kibana/node_modules/sass-loader/dist/getSassOptions.js file. Changing this line:

options.includePaths = (options.includePaths || []).concat(_path.default.dirname(resourcePath));

to this:

options.includePaths = (options.includePaths || []).concat(_path.default.dirname(resourcePath)).concat('/kibana');
10

I'm now getting errors when it's trying to optimize the uuid node module. Here's the 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'm assuming this may be babel related since my Kibana 7.5 package.json file has babel devDependencies included in it. What devDependencies do I need to include in my package.json file for 7.8 to work with javascript let/const variables?

Here's the different scripts and dependency objects in my Kibana 7.5 package.json file. Which one's should I include in my 7.8 package.json file for the optimizer to work?

{
  "name": "custom_filter_bar",
  "version": "1.0.0",
  "description": "Allows user to create custom filters displayed in a filter bar",
  "main": "index.js",
  "kibana": {
    "version": "7.5.0",
    "templateVersion": "1.0.0"
  },
  "scripts": {
    "preinstall": "node ../../preinstall_check",
    "kbn": "node ../../scripts/kbn",
    "es": "node ../../scripts/es",
    "lint": "eslint .",
    "start": "plugin-helpers start",
    "test:server": "plugin-helpers test:server",
    "test:browser": "plugin-helpers test:browser",
    "build": "plugin-helpers build"
  },
  "devDependencies": {
    "@elastic/eslint-config-kibana": "link:../../packages/eslint-config-kibana",
    "@elastic/eslint-import-resolver-kibana": "link:../../packages/kbn-eslint-import-resolver-kibana",
    "@kbn/expect": "link:../../packages/kbn-expect",
    "@kbn/plugin-helpers": "link:../../packages/kbn-plugin-helpers",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jest": "^22.4.1",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-no-unsanitized": "^3.0.2",
    "eslint-plugin-prefer-object-spread": "^1.2.1",
    "eslint-plugin-react": "^7.12.4"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "uuid": "^8.3.1"
  }
}
11

I don't think I'll be able to assist with this any further. Believe you are about the same step I was went attempting this. Past my abilities. :slight_smile:

I'd recommend making a new topic with the exact issue you are currently facing and maybe one of our developers will jump in.

12

Closing in favour of Installing plugin in Kibana 7.8

1 Like