Error importing Moralis SDK in Vite React App


I am trying to import the Moralis SDK into a react vite app by following the steps here.
However, after I have finished with the imports, all of my UI disappears and I cannot see anything.
Here is my import code. I have npm installed the SDK already.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import {ChakraProvider} from '@chakra-ui/react'
import {MoralisProvider} from 'react-moralis'

  <MoralisProvider appId='MY_APP_ID' serverUrl='MY-SERVER-URL'>
        <App />

Do you know what happens to be wrong with this?

Thanks in advance.

Can you check your console for any errors?

Here is the error I see in the Console. However, I cannot quite understand how to fix them.

Check moralis docs for getting started:

I have been following along with that and this is what I have encountered.

I am still facing this issue. Can anyone help?

Currently, Vite isnโ€™t working properly with react-moralis yet, but a quick way to override that is installing events as a dev dependency, but itโ€™s not suggested as this will only prevent the error in dev mode, but wonโ€™t once build is done.

A better suggestion is to use CRA template

It may be easier to start fresh with a new project and migrate all your existing code over. No issues Iโ€™ve found with a new React/Vite/Moralis project (outside of deployment, there are some known issues there).

This solution worked. Thanks so much! I should probably start using create-react-app from now on.

1 Like