TypeError: a.then is not a function while compiling in production

Question

I'm trying to compile my vue app in production with npm run build (which is vite build).

After that I try to serve my app on my server with the /dist folder and everything seems to be working perfectly, I'm able to send fetch request, click on various links etc.

Unfortunately, after logging in and when I should be redirected, I'm getting the error

TypeError: a.then is not a function while compiling in production

and

Uncaught (in promise) TypeError: a.then is not a function"

Everything just works perfectly fine while I'm in dev mode, it's just not working in production.

It seems to be linked to the router

This is the code for my Router :

const state = reactive({
    token: localStorage.getItem("token"),
    userAdmin: false,
    userRestaurateur: false,
    userDeliverer: false
});

if (state.token) {
    const user = JSON.parse(atob(state.token.split('.')[1]))
    state.userAdmin = Object.values(user.roles).includes('ROLE_ADMIN');
    state.userRestaurateur = Object.values(user.roles).includes('ROLE_RESTAURANT');
    state.userDeliverer = Object.values(user.roles).includes('ROLE_DELIVERER');
}

const router = createRouter({
    history: createWebHistory('/'),
    routes: [
        {
            path: '/',
            name: 'home',
            component: function () {
                if (state.token && state.userAdmin) {
                    return Users
                } else if (state.token && state.userRestaurateur) {
                    return HomeRestaurateur
                }else if (state.token && state.userDeliverer) {
                    return Commands
                }else {
                    return Home
                }
            }
        },
        {
            path: "/login",
            name: "login",
            component: Login,
        },
        {
            path: "/forgot-password",
            name: "forgot_password",
            component: ForgotPassword,
        },
        {
            path: "/reset-password/:token",
            name: "reset_password_token",
            component: ResetPassword,
        },
        {
            path: "/register",
            name: "register",
            component: Register,
        },
        {
            path: "/profile",
            name: "editProfile",
            component: editProfile,
        },
        {
            path: "/Restaurant/:id/Menu",
            name: "Meals",
            component: Meals,
        },
        {
            path: "/admin/users",
            name: "admin_users",
            component: function () {
                if (state.userAdmin) {
                    return Users
                } else {
                    return Error403
                }
            }
        },
        {
            path: "/admin/restaurants",
            name: "admin_restaurants",
            component: function () {
                if (state.userAdmin) {
                    return Restaurants
                } else {
                    return Error403
                }
            }
        },
        {
            path: "/admin/restaurants_request",
            name: "admin_restaurants_request",
            component: function () {
                if (state.userAdmin) {
                    return RestaurantsRequest
                } else {
                    return Error403
                }
            }
        },
        {
            path: "/restaurants/new",
            name: "create_restaurants",
            component: CreateRestaurant,
        },
        {
            path: "/admin/reports",
            name: "admin_reports",
            component: function () {
                if (state.userAdmin) {
                    return Reports
                } else {
                    return Error403
                }
            }
        },
        {
            path: "/orders",
            name: "orders",
            component: Commands,
        },
        {
            path: "/:pathMatch(.*)*",
            name: "not_found",
            component: Error404,
        }
    ],
});

I tried checking if other methods were working correctly, tried to change server, nothing just seems to work.

Answer 1

I was having the same problem. My local build was working fine, but after building for production and deploying to my server, I was getting a similar error.

My console error was

Uncaught (in promise) TypeError: i.then is not a function"

The stacktrace pointed to vue-router. I tried many things until I saw your comment. In my routes, I had functions for the components like:

  {
    path: '/profile',
    name: 'Profile',
    component: () => Profile, //this was the problem
  },

I changed it to:

  {
    path: '/profile',
    name: 'Profile',
    component: Profile, //this was the fix
  },

and now it is working!