Code Monkey home page Code Monkey logo

appwrite / sdk-for-svelte Goto Github PK

View Code? Open in Web Editor NEW
73.0 23.0 14.0 194 KB

Appwrite SDK for Svelte ๐Ÿงก โš ๏ธ Warning - this SDK was designed to support Appwrite 0.9 and is not compatible with the latest Appwrite versions. We are planing to refactor it as part of the SDK Generator for better support and maintenance.

Home Page: https://appwrite.io

License: BSD 3-Clause "New" or "Revised" License

JavaScript 18.88% Svelte 81.12%
appwrite svelte sveltejs hacktoberfest

sdk-for-svelte's Introduction

โš ๏ธ Warning - this SDK was designed to support Appwrite 0.9 and is not compatible with the latest Appwrite versions. We are planing to refactor it as part of the SDK Generator for better support and maintenance.

svelte-appwrite (Beta)

Easy to use Appwrite components for Svelte. Install it:

npm install svelte-appwrite
# or 
yarn svelte-appwrite

Table of contents

Usage

You need a running instance of Appwrite to use this library. Go to https://appwrite.io/docs/installation for more instructions.

Psuedo Example

Handle multiple levels of async relational data (and their loading & fallback states) entirely from the Svelte HTML.

<!-- 1. ๐Ÿ’ช Appwrite App -->
<Appwrite {...config}>

    <!-- 2. ๐Ÿ˜€ Get the current user -->
    <User let:user>

        <h1>Hello {user.name}!</h1>

        <!-- 3. ๐Ÿ“š Get all the documents from a collection -->
        <Collection collection="5f56a3035a01f" let:documents>
            You have {documents.length} documents.
            
            {#each documents as document}

                <!-- 4. ๐Ÿ“œ Get a document -->
                <Document {document}>
                    Title: {document.title}
                    Text: {document.text}
...

Initialize

Must be initialised and wrap every svelte-appwrite component.

<script>
  import { Appwrite } from "svelte-appwrite";

  const config = {
    endpoint: "http://localhost/v1",
    project: "5f4938898667e",
    locale: "de",
  };
</script>

<Appwrite {...config}>
  ...
</Appwrite>

Properties

Name Description
endpoint Your Appwrite endpoint
project Your project ID
locale Optional The users locale

Create user

Registers a new account.

<script>
  import { Create } from "svelte-appwrite";

  let email = "";
  let password = "";
  let name = "";

  const success = e => {
    //success callback
    // `e` contains the user object
  };

  const failure = e => {
    //failure callback
  }
</script>

<Create let:actions on:success on:failure>
  <input type="text" bind:value={email}>
  <input type="password" bind:value={password}>
  <input type="text" bind:value={name}>
  <button on:click={actions.create(email,password, name)}>Register</button>
</Create>

Directives

let:actions object

Object with function.

Arguments

Name Description
create(email, password, name) Registers a new user.

Events

on:success

Triggers on successful register.

Arguments

Name Description
response Response

on:failure

Triggers on failed register.

Arguments

Name Description
response Response

Login via Email

Login via email and password.

<script>
  import { AuthEmail } from "svelte-appwrite";

  let email = "";
  let password = "";

  const success = e => {
    //success callback
    // `e` contains the user object
  };

  const failure = e => {
    //failure callback
  }
</script>

<AuthEmail let:authorize on:success on:failure>
  <input type="text" bind:value={email}>
  <input type="text" bind:value={password}>
  <button on:click={authorize(email,password)}>Login</button>
</AuthEmail>

Directives

let:authorize function

Initiates login.

Arguments

Name Description
email E-Mail
password Password

Events

on:success

Triggers on successful login.

Arguments

Name Description
email E-Mail

on:failure

Triggers on failed login.

Arguments

Name Description
error Error object.

Login via OAuth2

Login via an OAuth2 provider.

<script>
  import { AuthOAuth2 } from "svelte-appwrite";
</script>

<AuthOAuth2
  provider="google"
  success="http://localhost:5000?success"
  failure="http://localhost:5000?failure"
  let:authorize>
  <button on:click={authorize}>Login Google</button>
</AuthOAuth2>

Properties

Name Description
provider OAuth2 provider
success Success url
failure Failure url

Directives

let:authorize function

Get user

Requests current user to check if logged in.

<script>
  import { User } from "svelte-appwrite";
</script>

<User let:user>
  <h1>Hello {user.name}!</h1>
  <div>{user.email}</div>

  <div slot="error">
    You are not logged in!
  </div>
</User>

Directives

let:user object

Get currently logged in user data.

Get Collection

Get a list of all the documents from a collection.

<script>
  import { Collection } from "svelte-appwrite";
</script>

<Collection collection="5f56a3035a01f" let:documents>
  You have {documents.length} documents.
</Collection>

Properties

Name Description
collection Collection unique ID.
additional same as here

Directives

let:documents array

Array of documents.

let:actions object

Object with function.

Arguments

Name Description
reload() Re-fetch collection.
create(data, read, write) Create a new Document in the collection. read/write is optional and current user by default.

Get Document

Get a document. If you pass the document property with data from , there wont be any data requested.

<script>
  import { Document } from "svelte-appwrite";
</script>

<Document id="5f56a3asda01f" let:document>
  Title: {document.title}
  Text: {document.text}
</Document>

Properties

Name Description
id Document unique ID
collection Collection unique ID
or
document Document passed from <Collection />

Directives

let:document object

A JSON object with the document data.

let:actions object

Object with function.

Arguments

Name Description
update(data) Update the document.
remove() Deletes the document.
reload() Re-fetch document.

Events

on:change

Triggers on update or remove login.

API

Account

The Account components allow you to manage a user account.

<User />

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reload.
logout() Logout current session.
logoutAll() Logout from all session.
logoutFrom(session) Logout from specific session.
  • let:user
  • let:error

Events

  • on:success On user fetch success.
  • on:failure On user fetch failure.
  • on:successLogout On logout success.
  • on:failureLogout On logout failure.
  • on:successLogoutFrom On logoutFrom success.
  • on:failureLogoutFrom On logoutFrom failure.
  • on:successLogoutAll On logoutAll success.
  • on:failureLogoutAll On logoutAll failure.

<Create />

Directives

let:actions

Name Description
create(email, password, name) Creates a user.

Events

  • on:success On create success.
  • on:failure On create failure.

<Delete />

Directives

let:actions

Name Description
delete() Deletes currently logged in user.

Events

  • on:success On delete success.
  • on:failure On delete failure.

<Preferences />

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reloads preferences.
update(prefs) Update preferences.

Events

  • on:success On init and reload success.
  • on:failure On init and reload failure.
  • on:successUpdate On update success.
  • on:failureUpdate On update failure.

<RecoverPassword />

Directives

let:actions

Name Description
recover(email, url) Recover password.
complete(user, secret, password, passwordAgain) Complete password recovery.

Events

  • on:successRecover On init and reload success.
  • on:failureRecover On init and reload failure.
  • on:successComplete On update success.
  • on:failureComplete On update failure.

<Update />

Directives

let:actions

Name Description
name(name) Update name.
email(email, password) Update email.
password(password, oldPassword) Update password.

Events

  • on:successName On name success.
  • on:failureName On name failure.
  • on:successEmail On email success.
  • on:failureEmail On email failure.
  • on:successPassword On password success.
  • on:failurePassword On password failure.

<Verification />

Directives

let:actions

Name Description
create(url) Create Verification.
complete(user, secret) Complete Verification.

Events

  • on:successCreate On create success.
  • on:failureCreate On create failure.
  • on:successComplete On complete success.
  • on:failureComplete On complete failure.

Auth

The Auth components allow you to authenticate a user account.

<AuthEmail />

Slots

  • loading
  • success
  • error

Directives

  • let:authorize(email, password)
  • let:user
  • let:error

Events

  • on:success On authorize success.
  • on:failure On authorize failure.

<AuthOAuth2 />

Properties

Name Description
provider OAuth2 provider
success Success url
failure Failure url

Directives

let:authorize()

Avatars

The Avatar components aim to help you complete everyday tasks related to your app image, icons, and avatars.

<Browser />

Arguments

  • code
  • width
  • height
  • quality

Directives

  • let:src Image link

<CreditCard />

Arguments

  • code
  • width
  • height
  • quality

Directives

  • let:src Image link

<Favicon />

Arguments

  • url

Directives

  • let:src Image link

<Flag />

Arguments

  • code
  • width
  • height
  • quality

Directives

  • let:src Image link

<Image />

Arguments

  • url
  • width
  • height

Directives

  • let:src Image link

<QR />

Arguments

  • text
  • size
  • margin
  • download

Directives

  • let:src Image link

Database

The Database components allow you to create structured collections of documents, query and filter lists of documents, and manage an advanced set of read and write access permissions.

<Collection />

Arguments

  • id
  • filters
  • offset
  • limit
  • orderField
  • orderType
  • orderCast
  • search
  • first
  • last

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reload.
create(data, read, write) Creates a Document.
  • let:documents
  • let:error

<Document />

Arguments

  • id
  • collection
  • document

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reload.
update(data) Updates a Document.
remove() Removes a Document.
  • let:document
  • let:error

Storage

The Storage components allow you to manage your project files. You can upload, view, download, and query all your project files.

<Storage />

Directives

let:actions

Name Description
create(file, read, write) Uploads a file.
  • let:files

<FileList />

Arguments

  • search
  • limit
  • offset
  • orderType

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reload.
  • let:files
  • let:error

<File />

Arguments

  • file

Directives

let:actions

Name Description
download() Downloads file.
view(as) Get file for View.
preview(width, height, quality, background, output) Get file for preview.
update(read, write) Updates a file.
delete() Deletes a file.

Locale

The Locale components allow you to customize your app based on your users' location.

<Continents />

Directives

let:actions

Name Description
reload() Reload.
  • let:continents

Slots

  • loading
  • error

<Countries />

Arguments

  • eu

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reload.
  • let:countries

<Currencies />

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reload.
  • let:currencies

<Locale />

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reload.
  • let:code

<PhoneCodes />

Slots

  • loading
  • error

Directives

let:actions

Name Description
reload() Reload.
  • let:codes

sdk-for-svelte's People

Contributors

christyjacob4 avatar eldadfux avatar michaelgaultjr avatar torstendittmann avatar vendz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sdk-for-svelte's Issues

Upgrade our issue templates to use GitHub issue forms โœ๏ธ

Introduction

GitHub has recently rolled out a public beta for their issue forms feature. This would allow you to create interactive issue templates and validate them ๐Ÿคฏ.

Appwrite currently uses the older issue template format. Your task is to create GitHub issue forms for this repository. Please use Appwrite's issue templates as a reference for this PR.

Tasks summary:

  • Fork & clone this repository
  • Prepare bug report issue form in .github/ISSUE_TEMPLATE/bug.yaml
  • Prepare documentation issue form in .github/ISSUE_TEMPLATE/documentation.yaml
  • Prepare feature request issue form in .github/ISSUE_TEMPLATE/feature.yaml
  • Push changes to master and test issue forms on your fork
  • Submit pull request

If you need any help, reach out to us on our Discord server.

Are you ready to work on this issue? ๐Ÿค” Let us know, and we will assign it to you ๐Ÿ˜Š

Happy Appwriting!

"Create user" Result in the following error

** The requested module '/node_modules/.vite/appwrite.js?v=af1d9e1f' does not provide an export named 'default'
SyntaxError: The requested module '/node_modules/.vite/appwrite.js?v=af1d9e1f' does not provide an export named 'default' **

<script>
  import { Create } from "svelte-appwrite";

  let email = "";
  let password = "";
  let name = "";

  const success = e => {
    console.log(e);
    //success callback
    // `e` contains the user object
  };

  const failure = e => {
    console.log(e)
    //failure callback
  }
</script>

<Create let:actions on:success on:failure>
  <input type="text" bind:value={email}>
  <input type="password" bind:value={password}>
  <input type="text" bind:value={name}>
  <button on:click={actions.create(email,password, name)}>Register</button>
</Create>

๐Ÿ› Bug Report: Not working with SvelteKit (SSR)

๐Ÿ‘Ÿ Reproduction steps

Use module in SSR context. My code:

<SDK>
                <Create let:actions on:success on:failure>
                    <input bind:value={name} class="input" type="text" placeholder="username"/>
                    <input bind:value={email} class="input" type="email" placeholder="email"/>
                    <input bind:value={password} class="input" type="password" placeholder="password"/>
                    <Button class="button" on:click={actions.create(email, password, name)} type="submit"
                            label="Register"/>
                </Create>
</SDK>

SDK contains the default init from the README.

๐Ÿ‘ Expected behavior

No errors

๐Ÿ‘Ž Actual Behavior

Errors:

image

๐ŸŽฒ Appwrite version

Version 0.10.x

๐Ÿ’ป Operating system

Windows

๐Ÿงฑ Your Environment

I'm using SvelteKit with SSR.

๐Ÿ‘€ Have you spent some time to check if this issue has been raised before?

  • I checked and didn't find similar issue

๐Ÿข Have you read the Code of Conduct?

Collection actions.create return document

I hate to bring this here but tried discord several times and likely missed the answer.

I'm executing actions.create(...) on Collection to create a new document and I can't for the life of me figure out how to get that document in <script>...</script>.

I started to write a svelte component to turn around and filter for the doc, but that seemed kinda gross. I figure there has to be a more direct way?

I am able to get the doc if I iterate over the documents returned from the list with an if-block that looks for a property of the doc that matches a value used to create the doc. This is kinda ugly and, again, seems unnecessary.

Support SvelteKit and appwrite 0.3.0-beta

The latest version in npm is tied to appwrite ^0.2.3-beta

This does not seem to work with sveltekit out of the box:

__vite_ssr_import_0__.default is not a constructor

Installing direct from master gets further:

ReferenceError: require is not defined
    at /node_modules/.pnpm/[email protected]/node_modules/cross-fetch/dist/node-ponyfill.js?v=5ad71818:1:19
    at instantiateModule (/Users/jmathews/leavenoprints/leavenoprints-v1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:72639:166)
10:04:51 [vite] Error when evaluating SSR module /node_modules/.pnpm/[email protected]/node_modules/isomorphic-form-data/lib/index.js?v=5ad71818:
ReferenceError: module is not defined
    at /node_modules/.pnpm/[email protected]/node_modules/isomorphic-form-data/lib/index.js?v=5ad71818:1:19
    at instantiateModule (/Users/jmathews/leavenoprints/leavenoprints-v1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:72639:166)
10:04:51 [vite] Error when evaluating SSR module /node_modules/.pnpm/[email protected]/node_modules/cross-fetch/dist/node-ponyfill.js?v=5ad71818:
ReferenceError: require is not defined
    at /node_modules/.pnpm/[email protected]/node_modules/cross-fetch/dist/node-ponyfill.js?v=5ad71818:1:19
    at instantiateModule (/Users/jmathews/leavenoprints/leavenoprints-v1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:72639:166)

Adding the appwrite dependency explicitly, gets further, now compiles without issues, but the following error is seen in console:

Uncaught (in promise) SyntaxError: import not found: fetch

Adding appwrite to optimizeDeps fixes this:

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: adapter(),
    vite: {
      optimizeDeps: {
        include: ['appwrite'],
      },
    }
  }

I am using pnpm if that makes a difference.
Appwrite 3.2.0
SvelteKit v1.0.0-next.123

Thanks

Missing required parameter: "password"

๐Ÿ‘Ÿ Reproduction steps

get latest svelte (SPA)

(setup docker & svelte)
npm install svelte-appwrite
paste code from here, fill config (endpoint, project, locale, key) with API key set to create users only
fix missing userId ๐Ÿ˜„ (see below)
npm run dev

<Appwrite {...config}>
  <Create let:actions on:success={success} on:failure={failure}>
    <input type="email" placeholder="email" bind:value={email} />
    <input type="text" placeholder="password" bind:value={password} />
    <input type="text" placeholder="name" bind:value={name} />
    <button
      on:click={actions.create({
        email: email,
        password: password,
        name: name,
        userId: userId,
      })}
    >
      Register</button>
  </Create>
</Appwrite>

๐Ÿ‘ Expected behavior

create the user ๐Ÿ˜„

๐Ÿ‘Ž Actual Behavior

I get a full fledged error (which is good), but I don't see what's wrong with the password.

bubbles: false
โ€‹
cancelBubble: false
โ€‹
cancelable: false
โ€‹
composed: false
โ€‹
currentTarget: null
โ€‹
defaultPrevented: false
โ€‹
detail: Error: Missing required parameter: "password"
โ€‹โ€‹
columnNumber: 31
โ€‹โ€‹
fileName: "http://localhost:8080/build/bundle.js"
โ€‹โ€‹
lineNumber: 865
โ€‹โ€‹
message: "Missing required parameter: \"password\""
โ€‹โ€‹
stack: "create@http://localhost:8080/build/bundle.js:865:31\ncreate@http://localhost:8080/build/bundle.js:3459:48\ncreate_default_slot_1/mount/dispose<@http://localhost:8080/build/bundle.js:3563:48\nEventListener.handleEvent*listen@http://localhost:8080/build/bundle.js:116:14\nlisten_dev@http://localhost:8080/build/bundle.js:472:31\nmount@http://localhost:8080/build/bundle.js:3559:10\nmount@http://localhost:8080/build/bundle.js:3334:22\nmount@http://localhost:8080/build/bundle.js:3394:31\nmount_component@http://localhost:8080/build/bundle.js:330:30\nmount@http://localhost:8080/build/bundle.js:3656:23\nmount@http://localhost:8080/build/bundle.js:3094:22\nupdate@http://localhost:8080/build/bundle.js:3170:19\nupdate@http://localhost:8080/build/bundle.js:241:40\nflush@http://localhost:8080/build/bundle.js:208:23\ninit@http://localhost:8080/build/bundle.js:424:13\nApp@http://localhost:8080/build/bundle.js:3846:11\napp<@http://localhost:8080/build/bundle.js:3857:17\n@http://localhost:8080/build/bundle.js:3866:3\n"
โ€‹โ€‹
<prototype>: Error.prototype { stack: "", โ€ฆ }
โ€‹
eventPhase: 0
โ€‹
explicitOriginalTarget: <button>
โ€‹
isTrusted: false
โ€‹
originalTarget: null
โ€‹
returnValue: true
โ€‹
srcElement: null
โ€‹
target: null
โ€‹
timeStamp: 5982
โ€‹
type: "failure"
โ€‹
<get isTrusted()>: function isTrusted()

๐ŸŽฒ Appwrite version

Different version (specify in environment)

๐Ÿ’ป Operating system

Linux

๐Ÿงฑ Your Environment

"svelte-appwrite": "^0.2.3-beta"
appwrite v:0.13.4.304

local Docker version 20.10.7, build 20.10.7-0ubuntu5.1
node v14.18.3
npm 8.4.0

๐Ÿ‘€ Have you spent some time to check if this issue has been raised before?

  • I checked and didn't find similar issue

๐Ÿข Have you read the Code of Conduct?

๐Ÿ› Bug Report:

๐Ÿ‘Ÿ Reproduction steps

If we execute this below svelte code and run in Chrome and Safari browser:

<script>
  import { onMount } from 'svelte'
  import dayjs from 'dayjs'

  export let format = 'YYYY-MM-DD'
	export let date = new Date()
	
  let internal

  const input = (x) => (internal = dayjs(x).format(format))
  const output = (x) => (date = dayjs(x, format).toDate())

  $: input(date)
  $: output(internal)
</script>

<input type="date" bind:value={internal} min="2022-01-01" />

๐Ÿ‘ Expected behavior

The date before "2022-01-01" should not be visible to the user and user can't select the date as well before "2022-01-01".

๐Ÿ‘Ž Actual Behavior

It works well in chrome browser but not working in safari browser.
In Safari User can see the date before "2022-01-01" but user can't select the date.

Expected:
Date should not be visible to the user before "2022-01-01" for safari.

๐ŸŽฒ Appwrite version

Version 0.10.x

๐Ÿ’ป Operating system

Linux

๐Ÿงฑ Your Environment

No response

๐Ÿ‘€ Have you spent some time to check if this issue has been raised before?

  • I checked and didn't find similar issue

๐Ÿข Have you read the Code of Conduct?

Preferences.svelte createEventDispatcher

Hi.
Preferences.svelte's createEventDispatcher isn't actually called:
const dispatch = createEventDispatcher;
and throws an error, "Function called outside component initialization"
changing to:
const dispatch = createEventDispatcher();
does the trick.

Cannot find module & Logout not updating

Hi there!

I have setup a pretty standard project with login and almost everything works. But, here are my two problems:

  1. "Cannot find module 'svelte-appwrite' or its corresponding type declarations.ts(2307)" is shown in vscode on each import statement. I am using typescript, which might be the culprit. Everything works as expected, but the error is shown, nonetheless.

  2. I used the demo app as a boilerplate and everything but the logout button works. Once pressed it successfully logs out the user (viewable in console), but does not update the webpage. I coped the line <button on:click={() => actions.logout(actions.reload)}>Logout</button> yet it does not work.

My one enhancement that would make my particular use case quite helpful would be typescript support/declarations. The community seems to be moving heavily in this directions and I think it be a welcome addition.

If you need more information please let me know.

Thank you!

๐Ÿ› Bug Report:

๐Ÿ‘Ÿ Reproduction steps

installing the package and downloading the demo

๐Ÿ‘ Expected behavior

get a working demo with appwrite backend and svelte in the frontend
(i changed the configs)

๐Ÿ‘Ž Actual Behavior

Uncaught ReferenceError: svelteAppwrite is not defined
http://localhost:5000/build/bundle.js:2477
bundle.js:2477:1

svelteAppwrite does not even start with a capital letter like expected by svelte

๐ŸŽฒ Appwrite version

Version 0.10.x

๐Ÿ’ป Operating system

Linux

๐Ÿงฑ Your Environment

node v16.14.2
pnpm 6.32.3

๐Ÿ‘€ Have you spent some time to check if this issue has been raised before?

  • I checked and didn't find similar issue

๐Ÿข Have you read the Code of Conduct?

Preferences pref actions slot aren't returning values

Granted, could very easily be my ignorance; however, the following doesn't give me values from the slot:

<script>
    import * as M from "svelte-materialify/src";
    import * as I from "@mdi/js";
    import * as A from "svelte-appwrite";

    let preferences;
    let prefActions;

    function loadPrefs(e) {
        preferences = e.detail;
    }
</script>

<M.Container>
    <A.User let:user>
        <A.Preferences
            let:prefs={preferences}
            let:actions={prefActions}
            on:failure
        >
            Preferences: {preferences}
            {prefActions}
        </A.Preferences>
    </A.User>
</M.Container>

Results in:
{} Preferences: undefined [object Object]
I've analyzed prefActions and it is correct but preferences remains undefined?

Failed to resolve import "./Stores/user" from "node_modules/svelte-appwrite/src/stores.js"

I got this error trying to implement Authentication via E-Mail like described in the amazing article here.

19:05:49 [vite] Error when evaluating SSR module /node_modules/svelte-appwrite/src/appwrite.js:
TypeError: __vite_ssr_import_0__.default is not a constructor
    at /node_modules/svelte-appwrite/src/appwrite.js:4:8
    at instantiateModule (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68919:166)
19:05:52 [vite] Internal server error: Failed to resolve import "./Stores/user" from "node_modules/svelte-appwrite/src/stores.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/lsoave/SVELTE/svelte-kit-boot/node_modules/svelte-appwrite/src/stores.js
  1  |  import { writable } from "svelte/store";
  2  |  import { UserStore } from "./Stores/user";
     |                             ^
  3  |  import { DocumentsStore } from "./Stores/documents";
  4  |  
      at formatError (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:43464:46)
      at TransformContext.error (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:43460:19)
      at normalizeUrl (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:44974:26)
      at async TransformContext.transform (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:45103:57)
      at async Object.transform (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:43662:30)
      at async transformRequest (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:59322:29)
      at async /home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:59444:32

The stack I'm using is on Svelte kit actually:

{
	"name": "svelte-kit",
	"version": "0.0.1",
	"scripts": {
		"dev": "svelte-kit dev",
		"build": "svelte-kit build",
		"start": "svelte-kit start"
	},
	"devDependencies": {
		"@sveltejs/adapter-node": "next",
		"@sveltejs/kit": "next",
		"autoprefixer": "^10.2.5",
		"cssnano": "^4.1.10",
		"postcss": "^8.2.7",
		"postcss-load-config": "^3.0.1",
		"svelte": "^3.29.0",
		"svelte-preprocess": "^4.6.9",
		"tailwindcss": "^2.0.3",
		"vite": "^2.1.0"
	},
	"type": "module",
	"engines": {
		"node": ">= 12.17.0"
	},
	"dependencies": {
		"svelte-appwrite": "^0.2.1-beta"
	}
}

I'm not sure it is compatible with your work ...
any suggestion ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.