bitrix-tools / cli

Консольный инструмент Битрикс-разработчика
58 stars 25 forks source link

Не подключается Bitrix Vue 3 при сборке #64

Closed PaulGorlanov closed 1 year ago

PaulGorlanov commented 1 year ago

Беру пример из документации. https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=176&LESSON_ID=24320&LESSON_PATH=16866.24296.24300.24320

Скачиваю taskmanager, кладу его в папку /local/js/local/, файлы внутри не меняю https://dev.1c-bitrix.ru/docs/chm_files/vue3/taskmanager-utf8.zip

Запускаю bitrix build Выполняется без ошибок http://joxi.ru/1A5ojEocwLkkEm

Подключаю на сайте падает в ошибку, при нажатии на кнопку: Uncaught TypeError: Cannot read properties of undefined (reading 'createApp') at TaskManager.attachTemplate (page_e1370b0d600387ad6619e3720130f391_v1.js?16891472513833:72:80) at HTMLButtonElement.click (page_e1370b0d600387ad6619e3720130f391_v1.js?16891472513833:62:27) http://joxi.ru/MAjqWnqTYpZL82

Смотрю dist/taskmanager.bundle.js

Вижу что внизу: ((this.BX = this.BX || {}),BX,BX))

А должно быть: ((this.BX = this.BX || {}),BX.Vue3,BX))

@bitrix/cli 3.2.5 Node.js v17.9.1 npm 8.11.0

/* eslint-disable */
(function (exports,ui_vue3,main_core) {
    'use strict';

    var Item = {
      props: {
        position: {
          "default": 0
        },
        text: {
          "default": ''
        }
      },
      // language=Vue
      template: "\n\t\t<div class=\"taskmanager-list-item\">{{position}}. {{text}}</div>\n\t"
    };

    var TaskManger = {
      components: {
        Item: Item
      },
      data: function data() {
        return {
          list: []
        };
      },
      methods: {
        addNew: function addNew() {
          var result = prompt(this.$Bitrix.Loc.getMessage('TASK_MANAGER_QUESTION'));
          this.list.push(result);
        },
        close: function close() {
          this.$Bitrix.Application.get().detachTemplate();
        }
      },
      // language=Vue
      template: "\n\t\t<div class=\"taskmanager-list\">\n\t\t\t<div class=\"taskmanager-list-title\">{{$Bitrix.Loc.getMessage('TASK_MANAGER_TODAY_TITLE')}}</div>\n\t\t\t<template v-for=\"(value, index) in list\" :key=\"index\">\n\t\t\t\t<Item :position=\"index+1\" :text=\"value\"/>\n\t\t\t</template>\n\t\t\t<template v-if=\"list.length <= 0\">\n\t\t\t  \t<div class=\"taskmanager-list-empty\">{{$Bitrix.Loc.getMessage('TASK_MANAGER_LIST_EMPTY')}}</div>\n\t\t\t</template>\n\t\t\t<div class=\"taskmanager-list-buttons\">\n\t\t\t\t<button @click=\"addNew\">{{$Bitrix.Loc.getMessage('TASK_MANAGER_ADD')}}</button>\n\t\t\t\t<button @click=\"close\">{{$Bitrix.Loc.getMessage('TASK_MANAGER_CLOSE')}}</button>\n\t\t\t</div>\n\t\t</div>\n\t"
    };

    function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
    function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
    var _application = /*#__PURE__*/new WeakMap();
    var TaskManager = /*#__PURE__*/function () {
      function TaskManager(rootNode) {
        babelHelpers.classCallCheck(this, TaskManager);
        _classPrivateFieldInitSpec(this, _application, {
          writable: true,
          value: void 0
        });
        this.rootNode = document.querySelector(rootNode);
      }
      babelHelpers.createClass(TaskManager, [{
        key: "start",
        value: function start() {
          var _this = this;
          var button = main_core.Dom.create('button', {
            text: main_core.Loc.getMessage('TASK_MANAGER_OPEN'),
            events: {
              click: function click() {
                return _this.attachTemplate();
              }
            }
          });
          main_core.Dom.append(button, this.rootNode);
        }
      }, {
        key: "attachTemplate",
        value: function attachTemplate() {
          var context = this;
          babelHelpers.classPrivateFieldSet(this, _application, ui_vue3.BitrixVue.createApp({
            name: 'TaskManager',
            components: {
              TaskManger: TaskManger
            },
            beforeCreate: function beforeCreate() {
              this.$bitrix.Application.set(context);
            },
            template: '<TaskManger/>'
          }));
          babelHelpers.classPrivateFieldGet(this, _application).mount(this.rootNode);
        }
      }, {
        key: "detachTemplate",
        value: function detachTemplate() {
          if (babelHelpers.classPrivateFieldGet(this, _application)) {
            babelHelpers.classPrivateFieldGet(this, _application).unmount();
          }
          this.start();
        }
      }]);
      return TaskManager;
    }();

    exports.TaskManager = TaskManager;

}((this.BX = this.BX || {}),BX,BX));
//# sourceMappingURL=taskmanager.bundle.js.map
PaulGorlanov commented 1 year ago

Разобрался, оказывается нужно скачивать папку из bitrix /bitrix/modules и /bitrix/js. Без них работать не будет корректно, что логично. Думал что достаточно js