Moralis is not running in Sveltekit framework?

Hi guys,

I am new developer and I want to know how to run Moralis using sveltekit. I have installed it via nodejs and tried to import it. But it’s not working and producing error process in not defined. Breaking the working of the framework too.

Sveltekit framework may not be supported

Hey @manishshahi, you can just easily add the two scripts in your index.html or app.html (in the head section) in your sveltekit project:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

If you want to be more secure just download the scripts and put it in your static folder if you are afraid if jsdelivr or unpkg can send malicious javascript when hacked. This works for my project (it is not the cleanest solution because it is always loaded on every page, but it is good enough for me and hopefully also for you)

3 Likes

Far from being perfect, but I made it work this way:

  1. Add web3 and moralis in to your app.html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.min.js"></script>
  1. In your __layout.svelte (or any other page you want it) add this:
<script>
   import { onMount } from 'svelte';

    async function login() {
        let user = Moralis.User.current();
        if (!user) {
            user = await Moralis.authenticate({ signingMessage: 'Log in using Moralis' })
                .then(function (user) {
                    console.log('logged in user:', user);
                    console.log(user.get('ethAddress'));
                })
                .catch(function (error) {
                    console.log(error);
                });
        } else {
            console.log(user);
        }
    }

    onMount(() => {
        const serverUrl = 'https://xxxxxxx/server';
        const appId = 'xxxxxxxxxx';
        Moralis.start({ serverUrl, appId });

        login();
    });
</script>

Note:
I was not able to make it work installing npm i moralis
But it would be awesome if the Moralis people make this package compatible with Sveltekit

1 Like

@ishka thanks for this approach! Really helpful. I have tried to store my serverUrl and appId in .env file but it actually doesn’t working on the sveltekit.

This is because this error:

I hope Moralis team answers soon to this one, and we can start using the sdk properly in svelte.

Hey guys feel free to submit a PR to our public GitHub if you know how to fix this

Personally I’ve never used svelte

If you have svelte experience - check out the public GitHub and contribute with a Pr

@ishka @manishshahi the issue and the github ticket is a bit misleading. Because Moralis SDK is using the Web3 library (where the error originates from), so you are basically talking to the wrong developers.

The error (from the screenshot) originates from the util dependency, which is used by the web3-core-requestmanager and web3-core dependency and the web3 package and finally the Moralis npm package (check the browser while reproducing the error and view the callstack in your developer tools). Sveltekit is still in beta and still resolving issues as we speak (Rich Harris is now working full time on it, so we can hope it will be fixed in the next vite/sveltekit release cycle or eventually has a good solution before releasing 1.0), so demanding Moralis to find answers soon is a bit too much in my opinion and the work around I posted is good enough for beta software I think.

Also you have a lot of different adapters @ishka which means that your code in __layout.svelte will not work for certain adapters and settings (if you want to make it safe wrap it in a if statement where you check if you are in browser from the $app/env store).

When Sveltekit 1.0 is released I will check again if Moralis still doesn’t work nicely enough with sveltekit and will probably do a PR if I feel it is not out of scope of their codebase and their dependencies.

Thanks for sharing this information. It was very useful.