I need to draw editable JSON trees, to use that I've chosen this library - https://github.com/josdejong/jsoneditor; the idea is to draw trees inside a Terrasoft.ViewItemType.CONTAINER.
My understanding was that to import this(or any other) library I need to create a module and put a define() {} inside it, and inside that goes the library code(jsoneditor.js contents in my case), so I ended up doing that:
define("UsrJsonEditor", [], function () { // jsoneditor.js contents }
After that I'm importing that module to my page and trying to check if it works by doing this:
define("UsrCardOrders1Page", ["ProcessModuleUtilities", "UsrJsonEditor"], function(ProcessModuleUtilities, UsrJsonEditor) { return { ... methods: { initializeJsonEditor: function() { window.console.log("UsrJsonEditor: " + UsrJsonEditor); window.console.log("UsrJsonEditor.JSONEditor: " + UsrJsonEditor.JSONEditor); }, ... } { });
The initializeJsonEditor() function is called when the container is rendered.
This results in the following error:
Uncaught Error: Mismatched anonymous define() module: function () { return /******/ (function () { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ 6545: /***/ (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ t: function () { return /* binding */ ContextMenu; } /* harmony export */ }); /* harmony import */ var _createAbsoluteAnchor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1925); /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6237); /* harmony import */ var _i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3057); function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.construc…
I don't have enough experience with JS, but as I understand it the problem is that I've ended up with with the library's define() inside my own define(). Could someone tell if my approach is generally correct and what is that I'm doing wrong here?
Like
You can load it via the CDN using requirejs. See my response on this thread: https://community.creatio.com/questions/how-include-external-js-file-creatio
Ryan
You can load it via the CDN using requirejs. See my response on this thread: https://community.creatio.com/questions/how-include-external-js-file-creatio
Ryan
Aleksandrs Abarovičs,
What option worked for you?
I tried doing something like what was shown, but it gives me the following error:
message: Error: Script error for "PdfLib", needed by: UsrClient1Page http://requirejs.org/docs/errors.html#scripterror
requirejs.config({ paths: { PdfLib: 'https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.js' } }); define("UsrClient1Page", ["PdfLib"], function (PdfLib) { });
Solem Khn,
Not completely sure, but I believe PDFLib has other dependencies that also need to be loaded and the require config needs special values for it to load correctly. Might want to look for some examples of loading PDFLib using require from a CDN.
Solem Khn,
I had a similar problem, in the console I noticed that requirejs was trying to load jsoneditor.min.js.js instead of jsoneditor.min.js
Seems like requirejs automatically appends .js to the path defined in paths. So maybe your pdf-lib.js becomes pdf-lib.js.js.
I've ended up using this:
requirejs.config({ paths: { css: 'https://cdnjs.cloudflare.com/ajax/libs/require-css/0.1.10/css.min', JsonEditor: 'https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.2/jsoneditor.min', JsonEditorCSS: 'https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.2/jsoneditor.min' } }); define("UsrCardOrders1Page", ["ProcessModuleUtilities", "JsonEditor", "css!JsonEditorCSS"], function (ProcessModuleUtilities, JsonEditor) {}
This way I'm getting jsoneditor.min.js instead of jsoneditor.min.js.js