Web3uikit with Nextjs airbnb clone

Moralis General
#11

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.

1 Like
#12

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

1 Like
#13

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

1 Like
#14

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

2 Likes
#15

here is my package.json

Screenshot 2022-04-22 083034
Screenshot 2022-04-22 0830341920×1350 212 KB

#16

thanks. the app breaks when i import import magic sdk

1 Like
#17

thank you for your help

1 Like
#18

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

#19

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

#20

This is the error I am getting:

image
image1172×711 54.4 KB

The error comes whenever I use <ConnectButton />.

#21

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;
#22

Are you using the latest web3uikit version? Do you have magic-sdk as a dependency in your project as mentioned above?

#23

Try installing web3uikit in this order.

#24

Thanks a lot @osborn1900 :blush:.It worked!

#25

Hey can you help me out, I’m still getting the same error even after trying all the solutions stated above. How did you overcome this error?

1 Like
#26

yarn add web3uikit react-moralis This command worked for me.

#27

Still get the same error. Try both remove lib and add. and use the lastest version too “web3uikit”: “^0.1.149”,

#28

Hi I’m getting a module not found: cant resolve web3uikit on my nextjs app,. but it works fine whenever I comment out the ConnectButton, but it all breaks when I import the connect buttton.
here’s my package json file.

"dependencies": {
    "@web3uikit/core": "^0.1.3",
    "@web3uikit/icons": "^0.1.3",
    "@web3uikit/web3": "^0.1.3",
    "moralis": "^1.10.1",
    "next": "12.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moralis": "^1.4.0",
    "web3uikit": "^1.0.2"
  },

  "devDependencies": {
    "eslint": "8.21.0",
    "eslint-config-next": "12.2.3"
  }
}
#29

How have you imported ConnectButton? Since you’re using the new web3uikit, it needs to be like:

import { ConnectButton } from '@web3uikit/web3';

Also you can uninstall the old web3uikit package.

#30

Did that work ? let me know