Error importing Moralis SDK in Vite React App

Hello,

I am trying to import the Moralis SDK into a react vite app by following the steps here.
https://docs.moralis.io/moralis-dapp/connect-the-sdk/connect-with-react
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'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>  
  <MoralisProvider appId='MY_APP_ID' serverUrl='MY-SERVER-URL'>
      <ChakraProvider>
        <App />
      </ChakraProvider>
  </MoralisProvider>
  </React.StrictMode>
)

Do you know what happens to be wrong with this?

Thanks in advance.

Can you check your console for any errors?

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

Check moralis docs for getting started: https://docs.moralis.io/moralis-dapp/connect-the-sdk/connect-with-react

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 https://github.com/MoralisWeb3/react-moralis/issues/229, 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