Web3uikit with Nextjs airbnb clone

osborn1900 · April 21, 2022, 11:26am

Hi has anyone tried to use Web3uikit components with next js? i keep getting this (Error: Invalid hook call.)

i am following the recent airbnb clone YouTube tutorial, but instead of using react i am using nextjs. i have converted the starter file and made it work except anything that has to do with with web3uikit. , every time i use these components i get an error saying
(
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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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 resolveDispatcher (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\web3uikit\node_modules\react\cjs\react.development.js:1476:13)
at Object.useState (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\web3uikit\node_modules\react\cjs\react.development.js:1507:20)
at ConnectButton (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\web3uikit\dist\web3uikit.cjs.development.js:19357:25)
at renderWithHooks (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5448:16)
at renderIndeterminateComponent (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5521:15)
at renderElement (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5736:7)
_modules\react-dom\cjs\react-dom-server.browser.development.js:5897:7)
)

Iulian · April 21, 2022, 11:04am

What are you trying to do?

osborn1900 · April 21, 2022, 11:23am

i am following the recent airbnb clone YouTube tutorial, but instead of using react i am using nextjs. i have converted the starter file and made it work except anything that has to do with with web3uikit. , every time i use these components i get an error saying
(
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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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 resolveDispatcher (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\web3uikit\node_modules\react\cjs\react.development.js:1476:13)
at Object.useState (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\web3uikit\node_modules\react\cjs\react.development.js:1507:20)
at ConnectButton (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\web3uikit\dist\web3uikit.cjs.development.js:19357:25)
at renderWithHooks (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5448:16)
at renderIndeterminateComponent (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5521:15)
at renderElement (C:\Users\12248\Desktop\projects\Univerese3\v5 React-Next moralis airbnbstarter\NextApp\uv3-v5-nxt\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5736:7)
_modules\react-dom\cjs\react-dom-server.browser.development.js:5897:7)
)

mcgrane5 · April 21, 2022, 12:22pm

this might be a problem with your code as the error specifically says your breaking the rule of hooks. you should keep all hooks outside of if statemetns (useEffects) unless yanything like this inside your compoennt and keep all hooks at the top level of your omponent .can u share code that is prompting the error. in the meanwhie ill get on to the web3uikit devs

billgil · April 21, 2022, 12:25pm

hey dude, TY for using the web3uiKit!!

What version are you using? can you update to latest that is 0.1.128 as i type this message, run yarn and try again? We updated to React18 very recently and i think there was a bug in a release during that transition

billgil · April 21, 2022, 12:25pm

you can keep up to date here amigo

osborn1900 · April 21, 2022, 12:46pm

src/pages/_app.js

!

src/pages/index.js
Screenshot 2022-04-21 074225|629x500

i think the text editor messed up my copy… here is a screenshot

mcgrane5 · April 21, 2022, 12:46pm

yeah think the issue will be solved as bill mentioned u need to update, as the new react version was causing a breaking change

mcgrane5 · April 21, 2022, 12:46pm

make sure the version in package.json matches current version 0.1.128 as pointed out by bill

osborn1900 · April 21, 2022, 12:53pm

Thanks. I was just getting to respond to his message but, I already updated my version. to 0.1.28 and i still get the same error.

osborn1900 · April 21, 2022, 12:59pm

Hi, i still get the same error with the latest 0.1.128 update. could it be something specific to nextJs because i have the exact same code in vanilla react and it works well

billgil · April 22, 2022, 7:00am

i have pinged our local nextJS expert to see what he thinks, be right back buddy TY and sorry about this

eth · April 22, 2022, 7:35am

I was not able to reproduce this. Your _app.js code renders just fine using following the steps.

npx create-next-app@latest
yarn add web3uikit react-moralis
yarn next dev

Are there any other files using react-moralis or web3uikit? The stack trace only refers to various files in node_modules which isn’t of much help unfortunately.

Feel free to try the steps above and see if that resolves it for you or PM the code/repo

osborn1900 · April 22, 2022, 2:25pm

here is my package.json

osborn1900 · April 22, 2022, 4:48pm

thanks. the app breaks when i import import magic sdk

osborn1900 · April 22, 2022, 4:49pm

thank you for your help

billgil · April 25, 2022, 8:55am

nice find, did you discover is that related to web3uiKit, nextJS, or another package? I ask because magic is good tech i want to be sure it works with ours

dhwaj · May 4, 2022, 8:33pm

Hi, all was getting the same error, don’t know why. Here are the screenshots:
index.js:

dhwaj · May 4, 2022, 8:36pm

This is the error I am getting:

The error comes whenever I use <ConnectButton />.

dhwaj · May 4, 2022, 8:34pm

And this is the code for Sidebar.js:

import React from "react";
import Image from "next/image";
import { ConnectButton } from "web3uikit";

const isAuthenticated = true;
const username = "dhwaj";

const Sidebar = () => {
  const styles = {
    container: `h-full w-[300px] flex flex-col bg-[#fff] static`,
    profile: ` w-full py-16 flex flex-col justify-center items-center rounded-r-3xl bg-gradient-to-t from-[#0d141c] to-[#42667e] mt-[40px] mb-[50px] border-2 border-[#fb9701]`,
    profilePicContainer: `flex  rounded-xl items-center justify-center w-full h-full mb-5`,
    profilePic: `rounded-3xl object-cover`,
    welcome: ` text-md mb-2 font-bold text-2xl text-white`,
    walletAddress: `text-xl flex w-full justify-center font-extrabold mb-4`,
    menu: `flex flex-col w-full h-full px-10 gap-10`,
    menuItem: `flex items-center text-lg font-bold cursor-pointer gap-2`,
    amazonLogo: `mr-4 flex object-cover`,
    companyName: `text-lg font-bold flex flex-1 pl-10 items-center mt-[20px]`,
    usernameInput: `bg-transparent border-white border-2 rounded-lg w-[80%] py-2 px-4 text-lg mt-[20px] placeholder:text-white focus:outline-none flex justify-center items-center text-white`,
    username: `flex items-center w-full justify-center`,
    setNickname: `text-lg font-bold flex flex-1 items-center mt-[20px] mb-[20px] text-white`,
  };
  return (
    <div className={styles.container}>
      <div className={styles.profile}>
        {isAuthenticated && (
          <>
            <div className={styles.profilePicContainer}>
              <Image
                src={`https://avatars.dicebear.com/api/pixel-art/${username}.svg`}
                alt="profile"
                className={styles.profilePic}
                height={100}
                width={100}
              />
            </div>
            {!username ? (
              <>
                <div className={styles.username}>
                  <input
                    type="text"
                    placeholder="Username...."
                    className={styles.usernameInput}
                    // value={nickname}
                    // onChange={e => setNickname(e.target.value)}
                  />
                </div>
                <button
                  className={styles.setNickname}
                  //   onClick={handleSetUsername}
                >
                  Set Nickname
                </button>
              </>
            ) : (
              <div>
                <div className={styles.welcome}>Wecome {username}</div>
              </div>
            )}
          </>
        )}
        <div className={styles.connectButton}>
          <ConnectButton />
        </div>
      </div>
    </div>
  );
};

export default Sidebar;