[Vue alert]: не удалось разрешить компонент: UserBasket

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

Из всего кода, который я предоставляю, я удалил большую часть остального кода и сохранил то, что считаю важным, чтобы сделать его более читабельным. Если вам нужна дополнительная информация, дайте мне знать, и я обновлю вопрос.

Мой основной JS:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router.js';

const app = createApp(App);
app.use(router);
app.mount('#app');

Это мой App.vue:

<template>
  <div>
    <!-- if I put <Userbasket /> here it works -->
    <div>
      <router-view v-slot = "{ Component }">
        <Transition mode = "out-in">
          <component :is = "Component"/>
        </Transition>
      </router-view>
    </div>
  </div>
</template>
<script>

export default {
  name: 'App',
}
</script>

Соответствующий маршрутизатор vue:

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from "@/views/Home.vue";

const routes = [
  {
    name: 'home',
    path: '/home',
    component: HomeView,
  },
  {
    name: 'root',
    path: '/',
    redirect: '/home',
  },
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: routes
});

export default router;

И мой Home.vue:

<template>
  <div class = "d-flex p-2">
    <div class = "row-12 mb-2">
      <WeekSummary />
    </div>
    <div class = "row-12 mb-2">
      <!-- here it doesn't work, thrown warning in console -->
      <UserBasket />
      <!-- OtherComp renders correctly -->
      <OtherComp/>
    </div>
  </div>
</template>

<script>
import WeekSummary from '@/components/WeekSummary.vue'
import UserBasket from '@/components/UserBasket.vue';
import OtherComp from '@/components/OtherComp.vue';

export default {
    name: 'HomeView',
    components: {
      WeekSummary,
      UserBasket,
      OtherComp,
    }
};
</script>

И компонент, который я пытаюсь визуализировать UserBasket.vue:

<template>
  <div>
    ... lots of div and span ...
  </div>
</template>

<script>
// no child component
export default {
  name: 'UserBasket',
}
</script>

И моя структура каталогов:

src
|-components
| |-UserBasket.vue
| |-Popup.vue
| |-WeekSummary.vue
| |-OtherComp.vue // and more
|-views
| |-Home.vue
| |-OtherView.vue // and more
|-App.vue
|-main.js
|-router.js

Итак, я пытаюсь отобразить компонент UserBasket, но получаю ошибку, указанную в заголовке. Что странно, у меня более 20 компонентов, и это единственный, который не хочет рендериться.

Компонент UserBasket на самом деле находится внутри компонента WeekSummary, но я переместил его в HomeView, пытаясь отладить это, но ошибка все еще появляется, поэтому оставил его там для простоты. Я также попытался переместить его в корневой компонент в App.vue, и там он отображается без проблем, поэтому я не думаю, что это опечатка, как предполагают другие ответы на вопросы SO. Я также скопировал оператор импорта из дочернего компонента, в котором появилась ошибка, в App.vue, чтобы убедиться, что это не опечатка.

Во время разработки я использую npm run serve для его запуска, чтобы он автоматически перезагружался, если я меняю файл. Когда я сохраняю файл UserBasket.vue, он перезагружается и действительно может импортировать и правильно отобразить его без предупреждения, поэтому я думаю, что здесь нет опечатки. Но если я перезагрузлю страницу, компонент больше не отобразится.

Я попробовал создать приложение с помощью npm run build, и во встроенной версии также возникла эта проблема.

Я также попытался поместить другой компонент рядом с UserBasket, и другой отобразился правильно. Другой компонент находится в той же папке, что и UserBasket, и я использовал тот же метод объявления пути. "@/comComponents/OtherComp.vue" похож на "@/comComponents/UserBasket.vue", поэтому я не думаю, что это проблема с путем. Я также попробовал путь «./comComponents/UserBasket.vue» и «./UserBasket.vue» в файле WeekSummary.vue.

Я хочу отметить, что в WeekSummary у меня есть еще один компонент «Popup.vue», который отображается правильно, а файл «Popup.vue» находится рядом с UserBasket.vue в папке компонентов.

мои версии vue:

    "vue": "^3.4.31",
    "vue-router": "^4.2.5",

Я также попробовал перейти на версию 3.3.0, но проблема все еще существует.

UserBasket используется в 3-х местах и ​​ни в одном не работает. на загруженном сайте, проверяющем HTML DOM в браузере, там, где он должен быть, есть тег <userbasket></userbasket>.

Предупреждение консоли выводится из трех разных строк для каждого места, где я использовал UserBasket.

• Один из них образует строку main.js app.use(router);.
• Во-вторых, в моем файле auth.js формируется строка, куда я помещаю данные из ответа axios: this.user = response.data; Я не знаю, почему это здесь.
• и третий — из моего файла socket.js, связанного с сохранением данных из веб-сокета basket.basket = data.basket;

Обратите внимание, что во втором и третьем я сохраняю данные в объект хранилища Pinia. На данный момент я не знаю, что актуально или нет.

Мой vue.config.js, если это имеет значение:

const { defineConfig } = require('@vue/cli-service');
const packageJson = require('./package.json');


module.exports = defineConfig({
  chainWebpack: (config) => {
    // Set environment variables for Webpack
    config.plugin('define').tap((args) => {
      args[0]['process.env'].VUE_APP_VERSION = JSON.stringify(packageJson.version);
      return args;
    })
  },
  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  },
  transpileDependencies: true
});

Что я пробовал из другого вопроса, связанного с SO:

• убедился, что у меня есть один корневой компонент внутри UserBasket
• проверено на опечатку в имени и пути компонента
• убедился, что регистрация компонента находится в components, а не в component
• проверил другие браузеры и убедился, что кеш не задействован
• Я попробовал на другой машине (у меня был Pi 3), и проблема тоже там.
• Я также пробовал разные браузеры и обновлял сайт с помощью shift + f5.

Спасибо, что прочитали мой вопрос, дайте мне знать, если вам нужна дополнительная информация.

Обновлять

В браузере ни одно другое предупреждение vue не отображало только один флаг функции:

Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

Попробовав предложение @yoduh (спасибо) удалить код для упрощения компонента UserBasket, я удалил каждое использование моего хранилища pinia из моего компонента (того, где выдаются предупреждения), сохранил файл. В консоли не отображается предупреждение, и мой компонент отображается нормально. Итак, я думаю, что объект состояния Pinia где-то сломался.

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

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

В WeekSummary у меня был оператор vue watch, определенный для моего хранилища аутентификации, я удалил его, и он избавился от одного из предупреждений, которое было указано на файл хранилища auth.js. Я предполагаю, что где-то я пытаюсь обновить значение хранилища корзины, но я не уверен. Единственное предупреждение (появляется 4 раза подряд) слева — это указание на строку app.use(router) в моем main.js. Еще следует отметить, что журнал Pinia по умолчанию 🍍 "basket" store installed 🆕 не распечатывается в консоли ни в одном из моих магазинов. С помощью браузерного расширения vue devtools я вижу, что мои хранилища имеют действительные значения.

Комментирование использования UserBasket внутри WeekSummary уменьшает количество предупреждений с 4 до 1, а строки журнала Pinia регистрируются в консоли. Единственное оставшееся использование UserBasket — это файл Home.vue для целей отладки этой проблемы.

Я не нашел никаких проблем на странице GitHub Пинии по этому поводу.

Моя корзина.js, если это поможет:

import { defineStore } from 'pinia'
import { useAuth } from "@/stores/auth";
import { state as vuestate, socket } from "@/socket.js";
// other nonrelated imports...

export const useBasket = defineStore('basket', {
  state: () => ({basket: {}}),
  getters: {
    // my getters...
  },
  actions: {
    // my actions...
  }
})

Обновление 2

Я успешно создал репродукцию на playcode.io: https://playcode.io/1932830

Что хочу отметить:

• Я не знаю, как работает горячая перезагрузка на этом сайте, иногда она просто срабатывает, когда я загружаю сайт. Нажатие зеленой стрелки, а затем перезагрузка или полная перезагрузка приведет к появлению предупреждения. Также иногда нажатие на перезагрузку исправляет проблему, повторное нажатие снова сломает ее.
• В моей локальной среде у меня нет ошибки ReferenceError: setImmediate is not defined в консоли, как на этом сайте.
• Выше я прокомментировал некоторые утверждения об импорте: если я удалю этот импорт, закомментировав его, проблема будет устранена. Но конечно в полном проекте я их использую, они там не просто так.

Обновление 3

Основная причина того, что решение было трудно найти, заключалась в том, что в моей локальной среде разработки ReferenceError не отображался в моей консоли, что делало невозможным или, по крайней мере, очень трудным поиск подобных вопросов SO. Это был огромный намек. Ошибка была отображена в ссылке на воспроизведение, что позволило решить проблему. Надеюсь, что другие найдут это полезным.