Token transfer problem. Cannot find name 'Moralis' (React)

Moralis General
#1

TS2304: Cannot find name ‘Moralis’.
37 | const { fetch, error, isFetching } = useWeb3Transfer({
38 | type: “native”,

39 | amount: Moralis.Units.ETH(0.00001),
| ^^^^^^^
40 | receiver: “0x0000000000000000000000000000000000000000”
41 | });
42 |

#2

react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:14906:1)
    at useContext (react.development.js:1504:1)
    at useMoralis (useMoralis.ts:6:1)
    at useWeb3Transfer (useWeb3Transfer.ts:39:1)
    at TransferEth (App.tsx:37:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
    at executeDispatch (react-dom.development.js:8243:1)
#3

That error happens when hooks like the ones starting with ‘use’ are in the wrong place. They need to be on their own in the top level of your component e.g. not in a useEffect, a function, or after any returns (which affects hook order).

Can you post a bigger sample of your code?

1 Like
#4

import React from ‘react’;
//import ReactDOM from “react-dom”;

//import logo from ‘./logo.svg’;
import ‘./App.css’;
import { useMoralis } from “react-moralis”;
import { useMoralisWeb3Api } from “react-moralis”;
import { useWeb3Transfer } from “react-moralis”;
//import { Moralis } from “moralis”

function App() {

const { authenticate, isAuthenticated, isAuthenticating, user, account, logout } = useMoralis();

const login = async () => {
  if (!isAuthenticated) {

    await authenticate({signingMessage: "test" })
      .then(function (user) {
        console.log("登陆的用户名:", user);
        console.log(user!.get("ethAddress"));
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}

const logOut = async () => {
  await logout();
  console.log("logged out");
}

const TransferEth = () => {
const { fetch, error, isFetching } = useWeb3Transfer({
type: “native”,
amount: Moralis.Units.ETH(0.00001),
receiver: “0x0000000000000000000000000000000000000000”
});

return (
  // Use your custom error component to show errors
  <div>
    
    <button >
      error
    </button>
  </div>
);

};

return (


login
Transfer
logout

);
}

export default App;

#5

I had a similar issue.

I fixed it by installing the Moralis SDK “https://www.npmjs.com/package/moralis”.
The Moralis SDK is different from the “react-moralis” npm package.