Jsoneditor: Editor is not visible. JSONEditor is not defined

[sergibondarenko]

_Jsoneditor 5.15.0
Angular 1.6.9
Webpack 3.5.5_

Jsoneditor works in my simple jsfiddle but it doesn't work in Angular after bundled by Webpack. I can't see the editor and there is the following error in the browser dev console:

bundle.js:206979 ReferenceError: JSONEditor is not defined
    at JsonEditor.linkFunc (bundle.js:360763)
    at bundle.js:193562
    at bundle.js:202792
    at invokeLinkFn (bundle.js:202798)
    at nodeLinkFn (bundle.js:202187)
    at compositeLinkFn (bundle.js:201427)
    at compositeLinkFn (bundle.js:201430)
    at compositeLinkFn (bundle.js:201430)
    at compositeLinkFn (bundle.js:201430)
    at nodeLinkFn (bundle.js:202181)
    at compositeLinkFn (bundle.js:201427)
    at compositeLinkFn (bundle.js:201430)
    at compositeLinkFn (bundle.js:201430)
    at nodeLinkFn (bundle.js:202181)
    at compositeLinkFn (bundle.js:201427)
    at publicLinkFn (bundle.js:201292) "<json-editor json-editor-data="$ctrl.data" class="ng-isolate-scope">"

Angular directive:

import 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css'

class JsonEditor {                                                                                                                                                                                                 
  constructor() {                                                                                                                                                                                                  
    this.restrict = 'E',                                                                                                                                                                                           
    this.scope = {                                                                                                                                                                                                 
      jsonEditorSchema: '<',                                                                                                                                                                                       
      jsonEditorData: '<',                                                                                                                                                                                         
      jsonEditorOptions: '<',                                                                                                                                                                                      
      jsonEditorTrigger: '=',                                                                                                                                                                                      
      jsonEditorPersist: '&',                                                                                                                                                                                      
    };                                                                                                                                                                                                             
    this.template = '<div id="json-editor-placeholder"></div>';                                                                                                                                                    
    this.link = this.linkFunc;                                                                                                                                                                                     
  }                                                                                                                                                                                                                

  linkFunc(scope) {                                                                                                                                                                                                
    debugger;                                                                                                                                                                                                      
    scope.jsonEditorOptions = scope.jsonEditorOptions || {};                                                                                                                                                       
    scope.jsonEditorTrigger = scope.jsonEditorTrigger || {save: {}};                                                                                                                                               

    const editorElement = document.getElementById('json-editor-placeholder');                                                                                                                                      
    const editor = new JSONEditor(editorElement, scope.jsonEditorOptions);                                                                                                                                         

    editor.set(scope.jsonEditorData);                                                                                                                                                                              

    // scope.$on('$destroy', function() {                                                                                                                                                                          
    //   scope.jsonEditorPersist({data: editor.get()});                                                                                                                                                            
    // });                                                                                                                                                                                                         

    scope.jsonEditorTrigger.save = function() {                                                                                                                                                                    
      scope.jsonEditorPersist({data: editor.get()});                                                                                                                                                               
    };                                                                                                                                                                                                             
  }                                                                                                                                                                                                                
}                                                                                                                                                                                                                  

export default JsonEditor;

HTML template:

...
            <json-editor
              json-editor-data="$ctrl.data"
            ></json-editor>

Data:

    this.data = { 
      array: [1, 2, 3], 
      bool: true,
      greet: 'hello',
      obj: {a: 1, b: 2}, 
    }; 

[sergibondarenko]

I see the JSONEditor inside the Webpack bundle:

sergey@de2:~/app$ grep -rn JSONEditor public/dist/bundle.js 
326154: * @constructor JSONEditor
326195:function JSONEditor (container, options, json) {
326196:  if (!(this instanceof JSONEditor)) {
326197:    throw new Error('JSONEditor constructor called without "new".');
326263:JSONEditor.modes = {};
326266:JSONEditor.prototype.DEBOUNCE_INTERVAL = 150;
326269: * Create the JSONEditor
326275:JSONEditor.prototype._create = function (container, options, json) {
326287:JSONEditor.prototype.destroy = function () {};
326293:JSONEditor.prototype.set = function (json) {
326301:JSONEditor.prototype.get = function () {
326309:JSONEditor.prototype.setText = function (jsonText) {
326317:JSONEditor.prototype.getText = function () {
326325:JSONEditor.prototype.setName = function (name) {
326336:JSONEditor.prototype.getName = function () {
326342: * JSONEditor will be extended with all methods needed for the chosen mode.
326346:JSONEditor.prototype.setMode = function (mode) {
326354:  var config = JSONEditor.modes[mode];
326400:JSONEditor.prototype.getMode = function () {
326410:JSONEditor.prototype._onError = function(err) {
326421: * To remove the schema, call JSONEditor.setSchema(null)
326426:JSONEditor.prototype.setSchema = function (schema, schemaRefs) {
326436:      console.warn('Failed to create an instance of Ajv, JSON Schema validation is not available. Please use a JSONEditor bundle including Ajv, or pass an instance of Ajv as via the configuration option `ajv`.');
326475:JSONEditor.prototype.validate = function () {
326482:JSONEditor.prototype.refresh = function () {
326493: *                            will be added to the JSONEditor. Must contain functions
326496: *                            When the JSONEditor switches to a mixin, all mixin
326497: *                            functions are added to the JSONEditor, and then
326505:JSONEditor.registerMode = function (mode) {
326511:      JSONEditor.registerMode(mode[i]);
326520:    if (name in JSONEditor.modes) {
326536:    JSONEditor.modes[name] = mode;
326541:JSONEditor.registerMode(treemode);
326542:JSONEditor.registerMode(textmode);
326544:module.exports = JSONEditor;
332242: * @param {JSONEditor} editor
332937: * @param {JSONEditor} editor    The JSON Editor to attach to
337763:      console.warn('Failed to load Ace editor, falling back to plain text mode. Please use a JSONEditor bundle including Ace, or pass Ace as via the configuration option `ace`.');
360763:      var editor = new JSONEditor(editorElement, scope.jsonEditorOptions);
365904:      console.log(JSONEditor);

[josdejong]

Maybe you have to import JSONEditor like

import JSONEditor from 'jsoneditor';

or something like that?

[meirotstein]

I use JSONEditor on a Vue project which also bundled by Webpack and as @josdejong wrote I simply import it that way:

import JSONEditor from 'jsoneditor';

[sergibondarenko]

@josdejong @meirotstein it works! Thank you, guys.