Блог

Главная - Вопросы по программированию - Ошибка типа: не удается прочитать свойство «компоненты» неопределенного в Vue2

Ошибка типа: не удается прочитать свойство «компоненты» неопределенного в Vue2

#vuejs2 #mixins

#vuejs2 #смешивания

Вопрос:

Я использую mixins в компонентах подмножества app.vue без каких-либо проблем, все хорошо и работает нормально, но когда я хочу использовать его в компоненте app.vue, у меня возникает ошибка в консоли.

 <script>
/* eslint-disable */
import PanelUser from "./layouts/PanelUser";
import Auth from "./mixins/Auth";
export default {
  name: "App",
  mixins: [Auth],
  components: {
    PanelUser
  },
};
</script>

ошибка

Я также не могу использовать маршрутизатор; когда я его использую, страница полностью белая и ничего не отображается.

Комментарии:

1. Я думаю, что у вашего маршрутизатора, js есть проблема ,

Ответ №1:

Я нашел, как проверить эту ситуацию.

Во-первых, вы могли видеть, что ошибка вызвана методом checkComponents, наведите курсор мыши и щелкните левой кнопкой мыши.

введите описание изображения здесь

Во-вторых, добавьте точку останова, а затем обновите страницу.

введите описание изображения здесь

В-третьих, возможно, вы могли бы обнаружить, что некоторые миксины или компоненты, на которые ссылаются, показывают undefined. В моем случае второй миксин не определен.

введите описание изображения здесь

Наконец, проверьте ссылку или файл mixin. Я обнаружил, что причина в том, что я скопировал mixin из другого файла и забыл переименовать mixin при объявлении части.

введите описание изображения здесь

Вот и все, попробуйте проверить сами. 🙂

Комментарии:

1. Я хотел бы указать на этот ответ как на хороший пример полезного и обучающего. Спасибо, что нашли время написать этот ответ.

Ответ №2:

Вам необходимо изменить:

импортируйте PanelUser из «./layouts/PanelUser»;

Для

импортируйте {PanelUser} из «./layouts/PanelUser»;

И

импортируйте Auth из «./mixins/Auth»;

Для

импортируйте {Auth} из «./mixins/Auth»;

Ответ №3:

Ошибка связана со смешиванием.

Убедитесь, что ваши микшины, используемые в ваших компонентах, верны. (например, имя, путь импорта esm и т. Д.)

 import samplePackage from "sample-package";
import anotherMixin from "another-package/path/to/mixin";

export default {
    mixins: [
        samplePackage.sampleMixin,
        anotherMixin
    ]
}

Ответ №4:

После пары часов отладки я обнаружил, что в нашем случае виновником был vuelidate . Мы попытались перейти с Webpack на Vite, сохранив Vue 2.7 и vuelidate 3.

Импорт:

 import { validationMixin } from 'vuelidate'
console.log(validationMixin // undefined in production build

печатается только undefined после vite build

Прочитав о проблемах, связанных с импортом без ESM (# 1, # 2), я попытался изменить импорт на vuelidate / src:

 import { validationMixin } from 'vuelidate/src/index'
console.log(validationMixin) // works!

// import the validators from "lib" though, src threw an require-js error for me
import { required, email, minLength } from "vuelidate/lib/validators"