While running my website locally with yarn serve, everything works flawlessly.
However, when I attempt to run yarn build and then open the production version locally (using an Nginx server), I encounter an error when trying to access a specific globally-registered component through Vue Router:
TypeError: undefined is not a function
After some troubleshooting, it appears there might be an issue with how components are being globally registered.
It's worth noting that I also have a non-global component that opens without any problems.
This is how I'm currently registering the components:
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);
}
}
Alternatively, I may be incorrectly registering them in 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, [])],
}),
...
In the Vue Router's History Mode documentation, I integrated the Nginx code into my configuration file, and the assets load correctly indicating no issues there.
What could I be overlooking?
Appreciate any help!
EDIT: Stack trace provided below for reference:
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)