Глюк в Vue в производстве

Question

Когда я работаю локально, используя yarn serve, веб-сайт работает отлично.
Однако, когда я пытаюсь запустить yarn build и открыть рабочую версию локально (используя сервер Nginx, если это имеет значение), а затем открываю определенный глобально зарегистрированный компонент через Vue Router, я получаю сообщение об ошибке:

TypeError: undefined is not a function

После небольшой проб и ошибок кажется, что есть проблема с глобальной регистрацией компонентов.
Обратите внимание, что у меня также есть неглобальный компонент, но его можно открыть.

Вот как я сейчас их регистрирую:

function registerComponentsGlobally() {
  const requireComponent = require.context("./components/products", false, /\.vue/);
  const keys = requireComponent.keys();
  for (let i = 0; i < keys.length; i++) {
    const fileName = keys[i];
    const componentConfig = requireComponent(fileName);
    const componentName = fileName.split("/").pop().replace(/\.\w+$/, "");
    Vue.component(componentName, componentConfig.default || componentConfig);
  }
}

В качестве альтернативы, я могу ошибочно зарегистрировать их в Vue Router:

async function initializeVue() {
  const products = await fetch("products.json").then(data => data.json());

  function toRoutes(routes, {pageUrl, platforms: {0: {isExternal}}}) {
    if (!isExternal) {
      routes.push({
        path: `/${pageUrl}`,
        name: pageUrl,
        component: () => import(`./components/products/${pageUrl}`),
      });
    }
    return routes;
  }

  new Vue({
    router: new Router({
      mode: "history",
      routes: [...defaultRoutes, ...products.reduce(toRoutes, [])],
    }),
    ...

В документации Режим истории Vue Router я скопировал код Nginx в свой файл конфигурации, плюс ресурсы загружены правильно, поэтому, похоже, проблемы нет.

Чего мне не хватает?
Спасибо за помощь!

РЕДАКТИРОВАТЬ : Вот трассировка стека, если это актуально:

vue-router.esm.js:1921 TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at a (.*$ namespace object:90)
    at component (main.js:27)
    at vue-router.esm.js:1790
    at vue-router.esm.js:1817
    at Array.map (<anonymous>)
    at vue-router.esm.js:1817
    at Array.map (<anonymous>)
    at Rt (vue-router.esm.js:1816)
    at vue-router.esm.js:1752
    at h (vue-router.esm.js:1959)
    at r (vue-router.esm.js:1733)
    at r (vue-router.esm.js:1737)
    at r (vue-router.esm.js:1737)
    at Pt (vue-router.esm.js:1741)
    at e.zt.confirmTransition (vue-router.esm.js:1988)
    at e.zt.transitionTo (vue-router.esm.js:1890)
    at e.replace (vue-router.esm.js:2212)
    at ue.replace (vue-router.esm.js:2585)
    at a.routeToProduct (product-links.vue:44)
    at ne (vue.runtime.esm.js:1854)
    at HTMLButtonElement.n (vue.runtime.esm.js:2179)
    at HTMLButtonElement.Zi.o._wrapper (vue.runtime.esm.js:6911)

Answer 1

Не знаю почему, но мне удалось заставить его работать, изменив:

function toRoutes(routes, {pageUrl, platforms: {0: {isExternal}}}) {
  if (!isExternal) {
    routes.push({
      path: `/${pageUrl}`,
      name: pageUrl,
      component: () => import(`./components/products/${pageUrl}`),
    });
  }
  return routes;
}

на:

function toRoutes(routes, {pageUrl, platforms: {0: {isExternal}}}) {
  if (!isExternal) {
    // Extracted the directory to a variable
    const dir = `./components/products`;
    routes.push({
      path: `/${pageUrl}`,
      name: pageUrl,
      component: () => import(`${dir}/${pageUrl}`),
    });
  }
  return routes;
}