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

huangapple go评论85阅读模式
英文:

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

问题

我正在尝试使用npm run build(即vite build)在生产环境中编译我的Vue应用程序。

之后,我尝试使用/dist文件夹在服务器上提供我的应用程序,一切似乎都运行得很完美,我能够发送fetch请求,单击各种链接等等。

不幸的是,在登录后,当应该重定向时,我收到以下错误:

TypeError:在生产编译时a.then不是一个函数

以及

未捕获的(在承诺中)TypeError:a.then不是一个函数

在开发模式下,一切都运行得非常正常,但在生产环境中却不起作用。

似乎与路由有关

这是我的路由代码:

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: [
        // ...(你的其他路由配置)
    ],
});

我尝试检查其他方法是否正确运行,尝试更改服务器,但似乎都不起作用。

英文:

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 :

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

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

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

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

<!-- end snippet -->

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

答案1

得分: 1

以下是您要翻译的内容:

我遇到了同样的问题。我的本地构建运行正常,但在构建生产版本并部署到服务器后,出现了类似的错误。

我的控制台错误信息如下:

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

堆栈跟踪指向了vue-router。我尝试了很多方法,直到看到了您的评论。在我的路由中,我为组件使用了函数,像这样:

{
  path: '/profile',
  name: 'Profile',
  component: () => Profile, // 这是问题所在
},

我将其更改为:

{
  path: '/profile',
  name: 'Profile',
  component: Profile, // 这是修复方法
},

现在它可以正常工作了!

英文:

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&quot;

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: &#39;/profile&#39;,
    name: &#39;Profile&#39;,
    component: () =&gt; Profile, //this was the problem
  },

I changed it to:

  {
    path: &#39;/profile&#39;,
    name: &#39;Profile&#39;,
    component: Profile, //this was the fix
  },

and now it is working!

huangapple
  • 本文由 发表于 2023年2月14日 08:42:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/75442491.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定