Circular reference to "VisualizeLoaderProvider" when using getVisualizeLoader

[Sam_Reynolds]

I'm trying to embed an existing visualization using the getVisualizeLoader function from here but when I do, I get this error:

Uncaught (in promise) Error: Circular reference to "VisualizeLoaderProvider" found while 
resolving private deps: VisualizeLoaderProvider -> VisProvider -> registry -> RegionMapProvider
    at instantiate (private.js:136)
    at get (private.js:160)
    at Private (private.js:180)
    at loader.js:172

I'm trying to import this in a directive if that matters.

This is my directive:

import visualEditorTemplate from './visual_editor.html';
import { getVisualizeLoader } from 'ui/visualize/loader';
import $ from 'jquery';

export default function visualEditor() {
	'ngInject';

	return {
		restrict: 'AE',
		replace: true,
		template: visualEditorTemplate,
		scope: false,
		link: function ($scope, attrs) {
			$scope.loadVisualization = async function () {
				let id = attrs[0].attributes.index;
				console.log("id: ", id);
				console.log('loading visuals');
				const container = $('.vis-container');
				const loader = await getVisualizeLoader();
				loader.embedVisualizationWithId(container, id, {});
			};

			$scope.loadVisualization();
		}
	};
}

Let me know what might cause this or if I need to provide any information.
I'm using kibana-6.3.2

[bhavyarm]

@ppisljar can we get some help?

Thanks,
Bhavya