# Error when building new visualization factory

**URL:** <https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650>\
**Category:** Kibana\
**Created:** [March 19, 2018, 10:03pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650 "2018-03-19T22:03:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![jarajapu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jarajapu/32/28985_2.png) [@jarajapu](https://discuss.elastic.co/u/jarajapu)\
**Post date:** [March 19, 2018, 10:03pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/1 "2018-03-19T22:03:15Z")

</div>

I am trying to build a new visualization using the base visualization type in your visualization factory. After following the standard documentation as well as tutorials, I was able to get the plugin to try and register successfully.

However, I see an error as soon as I try to launch the plugin within a browser. Here is the error message :

Expected private module "undefined" to be a function  
[http://localhost:5601/ujc/bundles/commons.bundle.js?v=8467:87442](http://localhost:5601/ujc/bundles/commons.bundle.js?v=8467:87442)  
"\<div class="application ng-scope" ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()" ng-view="" ng-controller="chrome.$$rootControllerConstruct as kibana"\>"

---

<div class="post-metadata">

**Author:** ![jarajapu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jarajapu/32/28985_2.png) [@jarajapu](https://discuss.elastic.co/u/jarajapu)\
**Post date:** [March 19, 2018, 10:04pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/2 "2018-03-19T22:04:34Z")

</div>

![16%20PM](https://us1.discourse-cdn.com/elastic/original/3X/b/a/ba8eb050582707c967cf3173fe983ce180392982.png)

Attached is a screenshot. I am building on Kibana 7.0.0-alpha1

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [March 20, 2018, 8:40am UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/3 "2018-03-20T08:40:41Z")

</div>

Hi,

could you please provide some more information, what you mean by "launch the plugin with a browser"? Where exactly does it fail? When loading Kibana; creating a new visualization?

Also could you please paste the relevant source code. Best would be your visualization registration, and also when opening your dev tools and open the appropriate line (8467:87460) in your bundle.js what code line does this refer to?

---

<div class="post-metadata">

**Author:** ![jarajapu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jarajapu/32/28985_2.png) [@jarajapu](https://discuss.elastic.co/u/jarajapu)\
**Post date:** [March 20, 2018, 6:10pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/4 "2018-03-20T18:10:51Z")

</div>

@timroes, thank you for your response. It fails when I click on the 'visualize' tab in Kibana UI side nav.

Here is the visualization registration :

```
function SmartTableVisProvider(Private) {
  const VisFactory = Private(VisFactoryProvider);
  const Schemas = Private(VisSchemaProvider);

  return VisFactory.createBaseVisualization({
    name: 'smart_table',
    title: 'Smart Table',
    icon: 'fa fa-gear',
    description: 'Table with Colors',
    category: CATEGORY.OTHER,
    visualization: VisController,
    visConfig: {
      defaults: {
        fontSize: 22
      },
    },
    editorConfig: {
      optionsTemplate: tableOptionsTemplate,
      schemas: new Schemas([
        {
          group: 'metrics',
          name: 'metric',
          title: 'Value name we want',
          min: 1,
          aggFilter: ['!derivative', '!geo_centroid'],
          defaults: [
            {type: 'count', schema: 'metric'}
          ]
        }
      ]),
    }
  });
}

VisTypesRegistryProvider.register(SmartTableVisProvider);

```

Also, here is the appropriate line (8467:87460) in my bundle.js :

```
  // return the uniq id for this function
  function identify(fn) {
    if (typeof fn !== 'function') {
      throw new TypeError('Expected private module "' + fn + '" to be a function');
    }

    if (fn.$$id) return fn.$$id;else return fn.$$id = nextId();
  }
```

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [March 21, 2018, 9:07am UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/5 "2018-03-21T09:07:35Z")

</div>

Hmm so far it looks good. Are you sure `VisController` is a proper JavaScript class? Could you perhaps show the code of `VisController` and maybe also the `imports`/`require` statements in your SmartTableVisProvider file?

---

<div class="post-metadata">

**Author:** ![jarajapu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jarajapu/32/28985_2.png) [@jarajapu](https://discuss.elastic.co/u/jarajapu)\
**Post date:** [March 21, 2018, 6:05pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/6 "2018-03-21T18:05:53Z")

</div>

Here is the VisController class.

```auto
> class VisController {
> 
> constructor(el, vis) {
> this.vis = vis;
> this.el = el;
> this.container = document.createElement('div');
> this.container.className = 'smart-table-container-div';
> this.el.appendChild(this.container);
> }
> 
> render(visData, status) {
> 
> this.container.innerHTML = '';
> 
> return new Promise(resolve => {
> 
> const table = visData.tables[0];
> const metrics = [];
> let bucketAgg;
> 
> table.columns.forEach((column, i) => {
> const value = table.rows[0][i];
> const title = column.title;
> 
> const metricDiv = document.createElement('div');
> metricDiv.classname = 'smart-table-metric-div';
> metricDiv.innerHTML = '<b>${title}</b>: ${value}';
> metricDiv.setAttribute('style', 'font-size: ${this.vis.params.fontSize}pt');
> 
> this.container.appendChild(metricDiv);
> });
> 
> 
> resolve('when done rendering');
> });
> 
> }
> 
> destroy() {
> this.el.innerHTML = '';
> }
> };
> 
> export { VisController };

```

---

<div class="post-metadata">

**Author:** ![jarajapu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jarajapu/32/28985_2.png) [@jarajapu](https://discuss.elastic.co/u/jarajapu)\
**Post date:** [March 21, 2018, 6:06pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/7 "2018-03-21T18:06:47Z")

</div>

Here are the imports in SmartTableVisProvider file

> import {VisController} from './vis\_controller';
> 
> import { CATEGORY } from 'ui/vis/vis\_category';  
> import { VisFactoryProvider } from 'ui/vis/vis\_factory';  
> import { VisTypesRegistryProvider } from 'ui/registry/vis\_types';  
> import { VisSchemaProvider } from 'ui/vis/editors/default/schemas';

---

<div class="post-metadata">

**Author:** ![jarajapu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jarajapu/32/28985_2.png) [@jarajapu](https://discuss.elastic.co/u/jarajapu)\
**Post date:** [March 21, 2018, 6:07pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/8 "2018-03-21T18:07:31Z")

</div>

Once again, thank you for continuing to look into this @timroes

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [March 22, 2018, 10:59am UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/9 "2018-03-22T10:59:04Z")

</div>

_Just a small hint: when you want to insert a block of code here int he forums (or in markdown in general, use triple backticks (```) above and below it to get the proper highlighting._

Regarding the source code, that looks actually all very fine. Where do you place it, how does your folder structure look? Does Kibana start up correctly if you remove the plugin?

Is the full plugin source code somewhere available (on Github)?

---

<div class="post-metadata">

**Author:** ![jarajapu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jarajapu/32/28985_2.png) [@jarajapu](https://discuss.elastic.co/u/jarajapu)\
**Post date:** [March 26, 2018, 10:52pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/10 "2018-03-26T22:52:00Z")

</div>

Kibana does come up correctly when I remove the plugin. So, I suspect this is a plugin related issue.

My folder structure is also pretty simple. There is a directory for the plugin name and a public folder underneath it. pretty much that's all.

I cannot share the full plugin source code unfortunately but I can tell you that this happens even with the sample project discussed here: [https://www.elastic.co/blog/developing-new-kibana-visualizations](https://www.elastic.co/blog/developing-new-kibana-visualizations)

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [March 27, 2018, 7:05am UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/11 "2018-03-27T07:05:44Z")

</div>

What version of Kibana do you use to develop against? I unfortunately can't reproduce this issue with the sample visualization and have never seen a similar sounding issue in this part of the code.

---

<div class="post-metadata">

**Author:** ![jarajapu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jarajapu/32/28985_2.png) [@jarajapu](https://discuss.elastic.co/u/jarajapu)\
**Post date:** [March 27, 2018, 2:37pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/12 "2018-03-27T14:37:51Z")

</div>

I am on 7.0.0-alpha1

---

<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:** [April 24, 2018, 2:38pm UTC](https://discuss.elastic.co/t/error-when-building-new-visualization-factory/124650/13 "2018-04-24T14:38:04Z")

</div>

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