Web

Nuxt 3 / Appwrite Bug

Dec 27, 2023, 20:48

View on Discord

Votes

Replies

Participants

Unknown

Messages

David SchubertOriginal post

Rank 1: Thread

Jun 10, 2023, 09:50

There is a bug in the combination of Nuxt 3 and Appwrite. If you start with a normal Nuxt 3 App and some Appwrite commands. Then everything works fine!

The bug starts when you start to use the Appwrite CLI and use the following command "appwrite init project" and init the project you are working on. After this, the app is not working anymore and gives me always an 500 error:

500
__vite_ssr_import_1__.Client is not a constructor

at _sfc_main.setup (./pages/health/index.js:81:23)
at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18)
at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7190:25)
at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7151:36)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:614:15)
at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:743:14)
at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:698:7)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:631:12)
at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:743:14)

Summary

The user is experiencing a bug with Nuxt 3 and Appwrite CLI. The bug occurs when using the "appwrite init project" command, causing a 500 error with the message "__vite_ssr_import_1__.Client is not a constructor." The user found a workaround by putting the new Client function in an onBeforeMount lifecycle hook. The reason behind this behavior is still unknown. Solution: Place the new Client function in an onBeforeMount lifecycle hook.

David Schubert

Rank 1: Thread

Jun 10, 2023, 11:50

i found a solution. i need to put the new Client function in a onBeforeMount Lifecycle Hook. Does anybody has a answer why?

onBeforeMount(() => {
    client.value = new Client();
    client.value
        .setEndpoint("https://cloud.appwrite.io/v1")
        .setProject("***");

    account.value = new Account(client.value);
});

Drake

Admin

Jun 10, 2023, 21:31

What's the import line say?

David Schubert

Rank 1: Thread

Jun 10, 2023, 23:54

what do you mean bei "import line"?

Drake

Admin

Jun 10, 2023, 23:56

Require/import for Client

David Schubert

Rank 1: Thread

Jun 13, 2023, 07:48

import { Client, Databases, Functions } from "appwrite";

Drake

Admin

Jun 13, 2023, 15:32

The Appwrite CLI part is really throwing me off...how is the Appwrite CLI related to your nuxt project? It's not in the package.json or bundled in your app is it?

Nuxt 3 / Appwrite Bug

Need support?_