Не удается прочитать свойство 'isEmpty' из неопределенного: Loda sh ошибка при построении vue в качестве веб-компонента

Question

Я создаю приложение Vue, которое представляет собой многошаговую форму, которая затем встраивается в сайт Drupal 8.

Я использовал некоторые методы Loda sh в некоторых его компонентах. Пока приложение работает в режиме развертывания - npm run serve - или создается как приложение - npm run build - все работает нормально.

Однако, если это приложение построено как веб-компонент, возникает ошибка «Не удается прочитать свойство isEmpty of undefined» каждый раз, когда вызывается функция loda sh.

Изначально я интегрировал loda sh через vue -loda sh. После обнаружения этой ошибки я попытался интегрировать ее как внешнюю библиотеку - практически любой метод, описанный здесь , но безуспешно (такая же ошибка).

Я создаю веб-компонент через vue -cli 3 с помощью следующей команды:

vue-cli-service build --target wc --inline-vue --name my-component

Вот один из компонентов, в котором я использую loda sh functions -eg this._.isEmpty(this.backEndErrors.fieldsErrors); с использованием интеграции vue -loda sh.

<template>
  <b-col cols="12" md="8">
    <div id="my-form">
      <ValidationObserver v-slot="{ handleSubmit, invalid }" ref="form" slim>
        <b-form @submit.prevent="handleSubmit(onSubmitForm)" novalidate>
          <component
            :is="'formStep' + currentStep"
            v-bind="{
              classes: ['my-form', 'step-' + currentStep],
              id: 'form-scatola-perfetta-step-' + currentStep,
              errors: backEndErrors.fieldsErrors,
            }"
          />
          <div v-if="!_.isEmpty(backEndErrors.genericErrors)">
            <span
              :class="
                _.isEmpty(backEndErrors.genericErrors) ? null : 'is-invalid'
              "
            />
            <b-form-invalid-feedback>
              <div
                v-for="(error, index) in backEndErrors.genericErrors"
                :key="index"
              >
                {{ error }}
              </div>
            </b-form-invalid-feedback>
          </div>
          <div class="btn-wrapper">
            <b-button v-if="!currentStepisMin" @click.prevent="decreaseStep()">
              back
            </b-button>

            <b-button
              type="submit"
              v-if="currentStepisMax"
              :disabled="invalid || pendingAjaxRequest"
              >Submit/b-button
            >
            <b-button
              v-else
              :disabled="invalid || pendingAjaxRequest"
              @click.prevent="handleSubmit(increaseStep)"
            >
              Next step
            </b-button>
          </div>
        </b-form>
      </ValidationObserver>
      <b-modal
        hide-header
        no-close-on-backdrop
        no-close-on-esc
        cancel-title="Cancel title"
        ok-title="Ok title"
        @cancel="handleCancelModal"
        @ok="handleOKModal"
        id="id-modal"
      >
        <div class="title">
          Some text
        </div>
        <div class="text">
          Some other text
        </div>
      </b-modal>
    </div>
  </b-col>
</template>

<script>
import formStep1 from "./FormSteps/TheFormStep1/TheFormStep1";
import formStep2 from "./FormSteps/TheFormStep2/TheFormStep2";
import formStep3 from "./FormSteps/TheFormStep3/TheFormStep3";
import formStep4 from "./FormSteps/TheFormStep4/TheFormStep4";
import formStep5 from "./FormSteps/TheFormStep5/TheFormStep5";
import formStep6 from "./FormSteps/TheFormStep6/TheFormStep6";
import formStep7 from "./FormSteps/TheFormStep7/TheFormStep7";
import { mapGetters } from "vuex";
import { ValidationObserver } from "vee-validate";

export default {
  components: {
    ValidationObserver,
    formStep1,
    formStep2,
    formStep3,
    formStep4,
    formStep5,
    formStep6,
    formStep7,
  },
  data() {
    return {
      backEndErrors: {
        fieldsErrors: {},
        genericErrors: {},
      },
    };
  },
  computed: {
    ...mapGetters("form", [
      "currentStep",
      "getCurrentStepFields",
      "currentStepisMin",
      "currentStepisMax",
      "pendingAjaxRequest",
    ]),
    formIsValid() {
      return this._.isEmpty(this.backEndErrors.fieldsErrors);
    },
  },
  methods: {
    increaseStep() {
      this.backEndValidation().then(() => {
        if (this.formIsValid) {
          this.$store.dispatch("form/increasecurrentStep");
        }
      });
    },
    async backEndValidation() {
      try {
        const result = await this.$store.dispatch("formBackEndValidation");
        const currentStepFieldsErrors = this.getCurrentStepFieldsErrors(
          result.fieldsErrors
        );
        this.setBackEndErrors(currentStepFieldsErrors, result.messages.errors);
      } catch (e) {
        alert(e);
      }
    },
    setBackEndErrors(currentStepFieldsErrors = {}, genericErrors = {}) {
      this.backEndErrors = {
        fieldsErrors: currentStepFieldsErrors,
        genericErrors: genericErrors,
      };
    },
    getCurrentStepFieldsErrors(fieldErrors) {
      const currentStepFields = this.getCurrentStepFields;
      const vueInstance = this;
      return this._.pickBy(fieldErrors, (fieldError, index) => {
        return vueInstance._.has(currentStepFields, index);
      });
    },
    decreaseStep() {
      this.$store.dispatch("form/decreasecurrentStep");
    },
    async onSubmitForm() {
      await this.backEndValidation();
      if (this.formIsValid) {
        await this.postQuote();
      }
    },
    async postQuote() {
      try {
        await this.$store.dispatch("saveQuote");
        this.$bvModal.show("id-modal");
      } catch (e) {
        alert(e);
      }
    },
    handleCancelModal() {
      this.$store.reset();
    },
    handleOKModal() {
      window.location.replace("www.google.it");
    },
  },
};
</script>

<style scoped lang="scss"></style>

Я не знаю, может ли это быть связано с этой проблемой, но мой проект структурирован в этом путь:

-src 
├── app.css
├── App.vue
├── component
│   ├── TheForm
│       │   ├── TheForm.Vue
│       └── ForSteps...
├── plugins
│   └── ...
├── main.js
├── store
│   ├── index.js
│   ├── modules
│       └── ...
├── style
│   └── style.scss
├── utils
│   └── ...
└── views
    └── ...