Kibana-plugin API 4.n => 5.n; webpack errors when compiling tutorial plugin

Elastic Stack Kibana
1

I am trying to build a plugin for the curren ga version of Kibana (5.5.2) . To get me started I'm following Tim Roes' tutorial: https://www.timroes.de/2016/02/17/writing-kibana-4-plugins-field-formatters/
Perhaps due to version issues I have trouble getting this up and running.
I used aos and the kibana-plugin-template to make the initial setup.
I added a simple field_formatter copied mostly from Tim's tutorial, but some name changes, this is most of my code:

// file cluster-lookup/index.js
import exampleRoute from './server/routes/example';

export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'cluster-lookup',
    uiExports: {
		fieldFormats: [
			 'plugins/cluster-lookup/clustername'
		]
    },

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },

    init(server, options) {
      // Add server routes and initialize the plugin here
      exampleRoute(server);
    }
  });
};

// file cluster-lookup/public/clustername.js
function ClusterNameProvider(Private) {
	var _ = require('lodash');
	var FieldFormat = Private(require('ui/index_patterns/_field_format/field_format'));
    // I had to change the path in the line above from 'ui/index_patterns/_field_format/FieldFormat'

	// Create a new FieldFormat type and inherit FieldFormat
	_.class(ClusterName).inherits(FieldFormat);
	function ClusterName(params) {
		ClusterName.Super.call(this, params);
	}

	ClusterName.id = 'clustername';
	ClusterName.title = 'Cluster naam';
	ClusterName.fieldType = ['string'];

	ClusterName.prototype._convert = {
		text: function(value) {
			return 'kijk: ' + value;
		},
		html: function(value) {
			var html = value + ' ';
			if (value.length > 5) {
				html += '<span style="color:#419E63">↗</span>';
			} else if (value.length < 20) {
				html += '<span style="color:#A92E26">↘</span>';
			} else {
				html += '<span style="color:#797979">=</span>'
			}
			return html;
		}
  };

  return ClusterName;
}

require('ui/registry/field_formats').register(ClusterNameProvider);

When I run the code, the kibana server starts up, announces that the plugin is initialized, but when visiting localhost:5601 the following error is displayed as soon as Kibana has started up:

TypeError: __webpack_require__(562).register is not a function. (In '__webpack_require__(562).register(ClusterNameProvider)', '__webpack_require__(562).register' is undefined) (https://localhost:5601/pgc/bundles/kibana.bundle.js?v=8467:323785)
Version: 5.5.2
Build: 8467
Error: TypeError: __webpack_require__(562).register is not a function. (In '__webpack_require__(562).register(ClusterNameProvider)', '__webpack_require__(562).register' is undefined) (https://localhost:5601/pgc/bundles/kibana.bundle.js?v=8467:323785)
onerror@https://localhost:5601/pgc/bundles/commons.bundle.js?v=8467:76925:26
2

Since pull request 11221 Kibana has changed from default exports to named exports. That means you would need to fix the following lines:

Replace:

require('ui/registry/field_formats').register(ClusterNameProvider);

with:

import { RegistryFieldFormatsProvider } from 'ui/registry/field_formats';
RegistryFieldFormatsProvider.register(ClusterNameProvider);

Also you should replace:

var FieldFormat = Private(require('ui/index_patterns/_field_format/field_format'));

with:

import { IndexPatternsFieldFormatProvider } from 'ui/index_patterns/_field_format/field_format';
var FieldFormat = Private(IndexPatternsFieldFormatProvider);

The import statements must be at the top of the file on the top level.

We've been talking in IRC, so I know that doesn't solve all the issues yet, and we are about to continue looking into the issue, why the field formatter is still not showing up.

1 Like
3

With these changes I now run into webpack errors again:
"Module build failed: Syntax error: 'import' and 'export' may only appear at the top level.
googling for that error brings up stuff about babel not transpiling files that have import statements (https://stackoverflow.com/questions/37902849/import-and-export-may-only-appear-at-the-top-level), but I have made no changes to the webpack config (I hardly know where this can be found).
It's unclear to me why these errors didn't show up when trying the changes you proposed yesterday, I have made no other changes apart from the ones you suggested.

4

Also there is currently an issue with using something like _.class in a plugin, since this is a custom mixin Kibana adds to lodash, but you will get a separate lodash dependency in you plugin.

So to get rid of this you could (and should) use ES2015 class syntax instead (and remove the lodash import):

function ClusterNameProvider(Private) {
	var FieldFormat = Private(IndexPatternsFieldFormatProvider);
	class ClusterName extends FieldFormat {

		static id = 'clustername';
		static title = 'cluster naam';
		static fieldType = ['string'];

		_convert = {
			text: function(value) { /* */ },
			html: function(value) { /* */ }
		}

		constructor(params) {
			super(params);
		}
	}

  return ClusterName;
}
5

That fixes the issue, thanks!

6

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