Appwrite CLI command "appwrite init project" causes error 500.

[davidschubert]

Environment

"nuxt": "^3.5.2"
"appwrite": "^11.0.0",

Reproduction

https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz?file=README.md

Can't really reproduction the problem. Because you can't install the Appwrite CLI on Stackblitz or Codesandbox.

Appwrite CLI:
https://appwrite.io/docs/command-line

and you need a simple appwrite account and project to init it.

Describe the bug

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)

Additional context

No response

Logs

No response

[davidschubert]

@danielroe 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);
});

[danielroe]

I would guess that there might be an issue with ssr and appwrite. It would be worth investigating and updating their template, either way.

[davidschubert]

@danielroe So it's more a Appwrite with SSR problem, then a nuxt 3 problem?

[danielroe]

Maybe. Maybe not. Do you have a reproduction that doesn't require me to install the appwrite CLI and set up an account?

[davidschubert]

@danielroe It seems that there are some compatibility issues between Nuxt 3, Vite and the Appwrite JavaScript SDK. Vite has some issues with handling CommonJS modules, and Appwrite is currently releasing its SDKs as CommonJS modules.

The problem is there even without installing the appwrite CLI. The problem also exists if I want to import an appwrite instance globally via a useAppwrite.js composable.

I always get the following error message on the nuxt 3 page:

500
__vite_ssr_import_0__.default is not a constructor

---

And the console errors:

GET http:https://localhost:3000/test 500 (Internal Server Error)

SyntaxError: The requested module '/_nuxt/node_modules/.cache/vite/client/deps/appwrite.js?v=4cb03470' does not provide an export named 'default' (at useAppwrite.js:1:8)

nuxt.js:94 [nuxt] error caught during app initialization SyntaxError: The requested module '/_nuxt/node_modules/.cache/vite/client/deps/appwrite.js?v=4cb03470' does not provide an export named 'default' (at index.mjs?v=4cb03470:128:15)

[nuxt] error caught during app initialization SyntaxError: The requested module '/_nuxt/node_modules/.cache/vite/client/deps/appwrite.js?v=4cb03470' does not provide an export named 'default' (at index.mjs?v=4cb03470:128:15)

---

The useAppwrite.js looks like this:

import { Appwrite } from "appwrite";

const appwrite = new Appwrite();
appwrite.setEndpoint(process.env.APPWRITE_ENDPOINT);
appwrite.setProject(process.env.APPWRITE_PROJECT_ID);

export default function useAppwrite() {
    return { appwrite };
}