Skip to content
Start project
Back

Nuxt 3 / Appwrite Bug

  • 0
  • Web
View on Discord
David Schubert
10 Jun, 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:

TypeScript
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)
TL;DR
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
10 Jun, 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?

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

    account.value = new Account(client.value);
});
Drake
10 Jun, 2023, 21:31

What's the import line say?

David Schubert
10 Jun, 2023, 23:54

what do you mean bei "import line"?

Drake
10 Jun, 2023, 23:56

Require/import for Client

David Schubert
13 Jun, 2023, 07:48

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

Drake
13 Jun, 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?

Reply

Reply to this thread by joining our Discord

Reply on Discord

Recommended threads

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more