Jsoneditor code mode requires worker-json.js from the absoute path not from the relative

[smartameer]

Hi,
I was using json-editor in "code" mode which is requiring worker-json.js
I have my scripts folder from where ace.min.js is loading, but it requires worker-json.js which is also in scripts directory, but dom error says that it's being requested from absolute url instead of scripts directory. May i know why this worker-json is required when https://github.com/josdejong/jsoneditor/blob/master/examples/03_switch_mode.html says no need of worker-json.js for code mode.

My Script block is

        var classContainer = document.getElementById('puppetClassEditor');
        var classOptions = { modes: ['code', 'tree'],
            search: false
        };
        $scope.classEditor = new jsoneditor.JSONEditor(classContainer, classOptions);
        $scope.classEditor.container.style.height = '150px';

        var paramContainer = document.getElementById('puppetParametersEditor');
        var paramOptions = { modes: ['code', 'tree'],
            search: false
        };
        $scope.paramEditor = new jsoneditor.JSONEditor(paramContainer, paramOptions);
        $scope.paramEditor.container.style.height = '150px';

I am using angularjs above this editor.

[smartameer]

Sorry, My bad, I have renamed all the ace included libraries to .min.js which lead to error in showing worker json error.

[tomalec]

It seems that there is still an issue when loading from HTML Import.
With native support in Chrome Canary I get

2 Failed to load resource: the server responded with a status of 404 (Not Found)  http://juicy.github.io/juicy-jsoneditor/worker-json.js

Example here: http://juicy.github.io/juicy-jsoneditor/worker-json_bug.html

[josdejong]

That is an interesting one. This missing worker-json.js is a webworker loaded dynamically by Ace Editor. I suppose because relative paths are changed due to the import, ace editor tries to load the web worker from the wrong path.

[tomalec]

Well according to W3C HTML Import spec, browser loads resources from location relative to importing document. So it works nice for all regular <link>,<script> tags, but I have no idea what is the magic beyond Ace fetching algorithm.

[josdejong]

but I have no idea what is the magic beyond Ace fetching algorithm.

There is no magic there, Ace uses require.js/AMD for (dynamic) module loading, though this particular issue is about running a Web Worker. This web worker is instantiated by Ace here. It creates a WorkerClient, which creates an HTML5 Web Worker from a relative url here. Polymer doesn't know about this relative url and so it isn't updated and breaks your application.

I'm not sure, but I can try whether the code for the web worker can be packaged together with the other modules, so there is no dynamic loading needed.

[andrewboni]

Anyone have any luck with this? Trying to solve #157 and this seems to be related. Thanks!

[josdejong]

@smartameer and @tomalec I've just refactored the JSONEditor to CommonJS modules and using brace (see #157 (comment)). This could resolve the problems when using the editor inside Polymer. Could you maybe give the version in the develop branch a try?

[semicoloncharmedlife]

I'm having essentially the same issue when doing a gulp build from bower packages. Since the build minifies all vendor code into a single vendor.js file the worker-json.js is included inline, but Ace still tries to load it as a file dynamically and 404s. Anyone have any ideas on how to get around this?

[sidthekidder]

Still getting this error, in angular 5.

[josdejong]

How can I reproduce the issue?