Cloning OpenSea NFT Boilerplate Questions

Hey @Seatea,

There are multiple tutorials on YT if you are just starting off and are looking to deploy your first smart contracts through Remix. But in essence,

  1. Create a .sol contract file (first menu item on the left).
  2. Compile the contract (second menu item on the left).
  3. Connect your wallet to Remix on your desired network using Injected Web3 and deploy the contract (third menu item on the left)

In this video, Filip explains verifying a deployed contract, but also does a quick deploy of a contract (at timestamp 6:15 -->) https://www.youtube.com/watch?v=dvvaBq6d_dE&t=160s

Hi,

That solves it!

In the combi app i got some other warnings, but solved them …

Removed unused references (in import lines) in several files.

In src/components/AddressInput.jsx : React Hook useEffect has missing dependencies
=> Solved as:

  useEffect(() => {
    function fetchBusinesses() {
      if (validatedAddress) props.onChange(address);
    }
    fetchBusinesses()
  }, [address, validatedAddress, props]);

In src/components/NFTBalance.jsx : img elements must have an alt prop
=> Solved by adding: alt=""

        <Spin spinning={loading}>
          <img
            src={`${nftToSend?.image}`}
            alt="loading..."
            style={{

Also alt=“Item” added in some other “<img”-es (ie in src/components/NFTMarketTYransactions.jsx and 2x in src/components/NFTTokenIds.jsx)

In src/components/NFTMarketTYransactions.jsx removed the “const columns = [ … ];” lines at the end (since not used).

in src/components/NFTTokenIds.jsx : Effect callbacks are synchronous to prevent race conditions
=> Solved as:

  useEffect(() => {
    async function fetchData() {
      if (data?.result) {
        const NFTs = data.result;
        setTotalNFTs(data.total);
        setFetchSuccess(true);
        for (let NFT of NFTs) {
          if (NFT?.metadata) {
            NFT.metadata = JSON.parse(NFT.metadata);
            NFT.image = resolveLink(NFT.metadata?.image);
          } else if (NFT?.token_uri) {
            try {
              await fetch(NFT.token_uri)
                .then((response) => response.json())
                .then((data) => {
                  NFT.image = resolveLink(data.image);
                });
            } catch (error) {
              setFetchSuccess(false);
            }
          }
        }
        setNFTTokenIds(NFTs);
      }
    }
    fetchData();
  }, [data, resolveLink]);

To be complete, in the App.jsx I added the (in the video) removed import, menu and routing, as:

import { useEffect, useState} from "react";
import { useMoralis } from "react-moralis";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink,
  Redirect,
} from "react-router-dom";
import Account from "components/Account";
import Chains from "components/Chains";
import NFTBalance from "components/NFTBalance";
import NFTTokenIds from "components/NFTTokenIds";
import { Menu, Layout, Tabs} from "antd";
import SearchCollections from "components/SearchCollections";
import "antd/dist/antd.css";
import NativeBalance from "components/NativeBalance";
import "./style.css";
import Text from "antd/lib/typography/Text";
import NFTMarketTransactions from "components/NFTMarketTransactions";
import SubMenu from "antd/lib/menu/SubMenu";
import QuickStart from "components/QuickStart";
import Contract from "components/Contract/Contract";
import Ramper from "components/Ramper";
import Wallet from "components/Wallet";
import ERC20Balance from "components/ERC20Balance";
import ERC20Transfers from "components/ERC20Transfers";
import DEX from "components/DEX";

const { Header, Footer } = Layout;

const styles = {
  content: {
    display: "flex",
    justifyContent: "center",
    fontFamily: "Roboto, sans-serif",
    color: "#041836",
    marginTop: "130px",
    padding: "10px",
  },
  header: {
    position: "fixed",
    zIndex: 1,
    width: "100%",
    background: "#fff",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    fontFamily: "Roboto, sans-serif",
    borderBottom: "2px solid rgba(0, 0, 0, 0.06)",
    padding: "0 10px",
    boxShadow: "0 1px 10px rgb(151 164 175 / 10%)",
  },
  headerRight: {
    display: "flex",
    gap: "20px",
    alignItems: "center",
    fontSize: "15px",
    fontWeight: "600",
  },
};
const App = ({ isServerInfo }) => {
  const { isWeb3Enabled, enableWeb3, isAuthenticated, isWeb3EnableLoading } =
    useMoralis();



  const [inputValue, setInputValue] = useState("explore");

  useEffect(() => {
    if (isAuthenticated && !isWeb3Enabled && !isWeb3EnableLoading) enableWeb3();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated, isWeb3Enabled]);

  return (
    <Layout style={{ height: "100vh", overflow: "auto" }}>
      <Router>
        <Header style={styles.header}>
          <Logo />
          <SearchCollections setInputValue={setInputValue}/>
          <Menu
            theme="light"
            mode="horizontal"
            style={{
              display: "flex",
              fontSize: "17px",
              fontWeight: "500",
              marginLeft: "50px",
              width: "100%",
            }}
            defaultSelectedKeys={["nftMarket"]}
          >
            <SubMenu title="General" key="general">
              <Menu.Item key="/quickstart">
                <NavLink to="/quickstart">🚀 Quick Start</NavLink>
              </Menu.Item>
              <Menu.Item key="/wallet">
                <NavLink to="/wallet">👛 Wallet</NavLink>
              </Menu.Item>
              <Menu.Item key="/1inch">
                <NavLink to="/1inch">🏦 Dex</NavLink>
              </Menu.Item>
              <Menu.Item key="/onramp">
                <NavLink to="/onramp">💵 Fiat</NavLink>
              </Menu.Item>
              <Menu.Item key="/erc20balance">
                <NavLink to="/erc20balance">💰 Balances</NavLink>
              </Menu.Item>
              <Menu.Item key="/erc20transfers">
                <NavLink to="/erc20transfers">💸 Transfers</NavLink>
              </Menu.Item>
              <Menu.Item key="/contract">
                <NavLink to="/contract">📄 Contract</NavLink>
              </Menu.Item>
            </SubMenu>
            <SubMenu title="NFT" key="nft">
              <Menu.Item key="/NFTMarketPlace" onClick={() => setInputValue("explore")} >
                <NavLink to="/NFTMarketPlace">🛒 Explore Market</NavLink>
              </Menu.Item>
              <Menu.Item key="/nftBalance">
                <NavLink to="/nftBalance">🖼 Your Collection</NavLink>
              </Menu.Item>
              <Menu.Item key="transactions">
                <NavLink to="/transactions">📑 Your Transactions</NavLink>
              </Menu.Item>
            </SubMenu>
          </Menu>
          <div style={styles.headerRight}>
            <Chains />
            <NativeBalance />
            <Account />
          </div>
        </Header>
        <div style={styles.content}>
          <Switch>
            <Route exact path="/quickstart">
              <QuickStart isServerInfo={isServerInfo} />
            </Route>
            <Route path="/wallet">
              <Wallet />
            </Route>
            <Route path="/1inch">
              <Tabs defaultActiveKey="1" style={{ alignItems: "center" }}>
                <Tabs.TabPane tab={<span>Ethereum</span>} key="1">
                  <DEX chain="eth" />
                </Tabs.TabPane>
                <Tabs.TabPane tab={<span>Binance Smart Chain</span>} key="2">
                  <DEX chain="bsc" />
                </Tabs.TabPane>
                <Tabs.TabPane tab={<span>Polygon</span>} key="3">
                  <DEX chain="polygon" />
                </Tabs.TabPane>
              </Tabs>
            </Route>
            <Route path="/erc20balance">
              <ERC20Balance />
            </Route>
            <Route path="/onramp">
              <Ramper />
            </Route>
            <Route path="/erc20transfers">
              <ERC20Transfers />
            </Route>
            <Route path="/contract">
              <Contract />
            </Route>
            <Route path="/nftBalance">
              <NFTBalance />
            </Route>
            <Route path="/NFTMarketPlace">
              <NFTTokenIds inputValue={inputValue} setInputValue={setInputValue}/>
            </Route>
            <Route path="/transactions">
              <NFTMarketTransactions />
            </Route>
            <Route path="/ethereum-boilerplate">
              <Redirect to="/quickstart" />
            </Route>
            <Route path="/nonauthenticated">
              <>Please login using the "Authenticate" button</>
            </Route>
            <Route path="/">
              <Redirect to="/quickstart" />
            </Route>
          </Switch>
          <Redirect to="/NFTMarketPlace" />
        </div>
      </Router>
      <Footer style={{ textAlign: "center" }}>
        <Text style={{ display: "block" }}>
          ⭐️ Please star this{" "}
          <a
            href="https://github.com/ethereum-boilerplate/ethereum-boilerplate/"
            target="_blank"
            rel="noopener noreferrer"
          >
            boilerplate
          </a>
          , every star makes us very happy!
        </Text>

        <Text style={{ display: "block" }}>
          🙋 You have questions? Ask them on the {""}
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://forum.moralis.io/t/ethereum-boilerplate-questions/3951/29"
          >
            Moralis forum
          </a>
        </Text>

        <Text style={{ display: "block" }}>
          📖 Read more about{" "}
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://moralis.io?utm_source=boilerplatehosted&utm_medium=todo&utm_campaign=ethereum-boilerplat"
          >
            Moralis
          </a>
        </Text>
      </Footer>
    </Layout>
  );
};

export const Logo = () => (
  <div style={{ display: "flex" }}>
    <svg
      width="60"
      height="38"
      viewBox="0 0 50 38"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M43.6871 32.3986C43.5973 32.4884 43.53 32.5782 43.4402 32.6905C43.53 32.6007 43.5973 32.5109 43.6871 32.3986Z"
        fill="black"
      />
      <path
        d="M49.7037 14.3715C49.5241 6.2447 42.7891 -0.17592 34.6624 0.00367768C31.0031 0.0934765 27.4784 1.53026 24.8294 4.06708C22.113 1.46291 18.4986 0.00367768 14.727 0.00367768C6.71246 0.00367768 0.202047 6.49164 0 14.5511V14.6633C0 20.8146 2.24497 26.2698 4.26545 30.0189C5.11853 31.5904 6.08387 33.117 7.13901 34.5762C7.5431 35.115 7.8574 35.564 8.10435 35.8559L8.39619 36.2151L8.48599 36.3273L8.50844 36.3498L8.53089 36.3722C10.2146 38.3253 13.1555 38.5498 15.1087 36.8886C15.1311 36.8661 15.1536 36.8437 15.176 36.8212C17.1291 35.0701 17.3312 32.0843 15.625 30.1087L15.6026 30.0638L15.423 29.8618C15.2658 29.6597 15.0189 29.3455 14.727 28.9414C13.9188 27.8189 13.178 26.6515 12.5269 25.4392C10.8881 22.4309 9.42888 18.6145 9.42888 14.7531C9.49623 11.8347 11.9432 9.52236 14.8617 9.58971C17.7128 9.65705 19.9802 11.9694 20.0251 14.8205C20.0476 15.5389 20.2272 16.2348 20.5415 16.8859C21.4844 19.3104 24.2232 20.5227 26.6478 19.5798C28.4438 18.8839 29.6336 17.1553 29.6561 15.2246V14.596C29.7683 11.6775 32.2153 9.38766 35.1562 9.47746C37.94 9.56726 40.1625 11.8122 40.2748 14.596C40.2523 17.6941 39.2645 20.7472 38.1421 23.1718C37.6931 24.1371 37.1992 25.08 36.6379 25.978C36.4359 26.3147 36.2787 26.5617 36.1665 26.6964C36.1216 26.7862 36.0767 26.8311 36.0542 26.8535L36.0318 26.876L35.9869 26.9433C37.6033 24.9004 40.5442 24.5412 42.5871 26.1576C44.4953 27.6617 44.9443 30.3781 43.6198 32.4211L43.6422 32.4435V32.3986L43.6647 32.3762L43.732 32.2864C43.7769 32.1966 43.8667 32.1068 43.9565 31.9721C44.1361 31.7027 44.3606 31.3435 44.6525 30.8945C45.3933 29.6822 46.0668 28.4026 46.673 27.1229C48.1097 24.0249 49.6812 19.5349 49.6812 14.5286L49.7037 14.3715Z"
        fill="#041836"
      />
      <path
        d="M39.7135 25.1249C37.1094 25.1025 34.9991 27.2127 34.9766 29.8169C34.9542 32.4211 37.0645 34.5313 39.6686 34.5538C41.1503 34.5538 42.5647 33.8578 43.4626 32.6905C43.53 32.6007 43.5973 32.4884 43.6871 32.3986C45.1015 30.221 44.4729 27.3025 42.2953 25.9107C41.532 25.3943 40.634 25.1249 39.7135 25.1249Z"
        fill="#B7E803"
      />
    </svg>

  </div>
);

export default App;

Result: Compiled successfully!
and works.

Hi,

FYI… The Fantom logo, add to src/components/Chains/Logos.jsx file:

export const FantomLogo = () => (
  <svg width="25" height="25" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M0 10C0 4.47715 4.47715 0 10 0H20C25.5228 0 30 4.47715 30 10V20C30 25.5228 25.5228 30 20 30H10C4.47715 30 0 25.5228 0 20V10Z"
      fill="#12AFE5"
    />
    <path
      d="M17.2,12.9l3.6-2.1V15Zm3.6,9L16,24.7l-4.8-2.8V17L16,19.8,20.8,17ZM11.2,10.8l3.6,2.1L11.2,15Zm5.4,3.1L20.2,16l-3.6,2.1Zm-1.2,4.2L11.8,16l3.6-2.1Zm4.8-8.3L16,12.2,11.8,9.8,16,7.3ZM10,9.4V22.5l6,3.4,6-3.4V9.4L16,6Z"
      fill="white"

    />
  </svg>
);

And add to menuItems array in src/components/Chains/Chains.jsx :

  {
     key: "0xFA2", // 4002
     value: "Fantom testnet",
     icon: <FantomLogo />,
   },
   {
     key: "0xFA", // 250
     value: "Fantom Opera mainnet",
     icon: <FantomLogo />,
   },

and add “FantomLogo” to the logo’s import line

Hello, When i try to run I got an empty page on http://localhost:3000/NFTMarketPlace
after providing Moralis serverURL and AppID in the .env file
and using marketplace contract ABI and address pasted into the MoralisDappProvider.js file provided in comments

const [contractABI, setContractABI] = useState('[ { "inputs": [], "stateMutability": "nonpayable", "type": "constructor" }, { "anonymous": false, "inputs": [ { "indexed": true, "internalType": "uint256", "name": "itemId", "type": "uint256" }, { "indexed": true, "internalType": "address", "name": "nftContract", "type": "address" }, { "indexed": true, "internalType": "uint256", "name": "tokenId", "type": "uint256" }, { "indexed": false, "internalType": "address", "name": "seller", "type": "address" }, { "indexed": false, "internalType": "address", "name": "owner", "type": "address" }, { "indexed": false, "internalType": "uint256", "name": "price", "type": "uint256" }, { "indexed": false, "internalType": "bool", "name": "sold", "type": "bool" } ], "name": "MarketItemCreated", "type": "event" }, { "anonymous": false, "inputs": [ { "indexed": true, "internalType": "uint256", "name": "itemId", "type": "uint256" }, { "indexed": false, "internalType": "address", "name": "owner", "type": "address" } ], "name": "MarketItemSold", "type": "event" }, { "inputs": [ { "internalType": "address", "name": "nftContract", "type": "address" }, { "internalType": "uint256", "name": "tokenId", "type": "uint256" }, { "internalType": "uint256", "name": "price", "type": "uint256" } ], "name": "createMarketItem", "outputs": [], "stateMutability": "payable", "type": "function" }, { "inputs": [ { "internalType": "address", "name": "nftContract", "type": "address" }, { "internalType": "uint256", "name": "itemId", "type": "uint256" } ], "name": "createMarketSale", "outputs": [], "stateMutability": "payable", "type": "function" }, { "inputs": [], "name": "fetchMarketItems", "outputs": [ { "components": [ { "internalType": "uint256", "name": "itemId", "type": "uint256" }, { "internalType": "address", "name": "nftContract", "type": "address" }, { "internalType": "uint256", "name": "tokenId", "type": "uint256" }, { "internalType": "address payable", "name": "seller", "type": "address" }, { "internalType": "address payable", "name": "owner", "type": "address" }, { "internalType": "uint256", "name": "price", "type": "uint256" }, { "internalType": "bool", "name": "sold", "type": "bool" } ], "internalType": "struct marketPlaceBoilerPlate.MarketItem[]", "name": "", "type": "tuple[]" } ], "stateMutability": "view", "type": "function" }, { "inputs": [], "name": "owner", "outputs": [ { "internalType": "address", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function"}]')
const [marketAddress, setMarketAddress] = useState("0xa3dDf4B68CCda6c9CB35AE1962c60aA5cb226E90")

My initial installation of this boilerplate was working. But now it’s not. So, I’m restarting from scratch.

Today, I tried 6 times to install and run the clone again with different combinations.

I’m running Moralis Mumbai testnet (at Singapore) instance with version 0.0.328.

After following these steps at https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate (except the create market items section which I don’t think is important for now) I get the following warnings when I run yarn install.

C:\ethereum-nft-marketplace-boilerplate>yarn install
yarn install v1.22.17
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "@walletconnect/web3-provider > web3-provider-engine > eth-block-tracker > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@walletconnect/web3-provider > web3-provider-engine > eth-block-tracker > @babel/plugin-transform-runtime > babel-plugin-polyfill-corejs2 > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.4.0-0".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
Done in 68.80s.

And when I run yarn start I get the error below at Moralis Dashboard -> Logs -> Error.

2022-01-14T01:26:39.629Z - Error: Invalid function: "getAllTokenIds"
    at handleCloudFunction (/moralis-server/lib/Routers/FunctionsRouter.js:119:13)
    at /moralis-server/lib/PromiseRouter.js:85:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
2022-01-14T01:26:39.180Z - Error: Invalid function: "getPluginSpecs"
    at handleCloudFunction (/moralis-server/lib/Routers/FunctionsRouter.js:119:13)
    at /moralis-server/lib/PromiseRouter.js:85:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
2022-01-14T01:26:13.451Z - Error: Invalid function: "getNFTs"
    at handleCloudFunction (/moralis-server/lib/Routers/FunctionsRouter.js:119:13)
    at /moralis-server/lib/PromiseRouter.js:85:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
2022-01-14T01:26:09.098Z - Error: Invalid function: "getPluginSpecs"
    at handleCloudFunction (/moralis-server/lib/Routers/FunctionsRouter.js:119:13)
    at /moralis-server/lib/PromiseRouter.js:85:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
2022-01-14T01:26:09.039Z - Error: Invalid function: "getNativeBalance"
    at handleCloudFunction (/moralis-server/lib/Routers/FunctionsRouter.js:119:13)
    at /moralis-server/lib/PromiseRouter.js:85:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
2022-01-14T01:26:09.026Z - Error: Invalid function: "getAllTokenIds"
    at handleCloudFunction (/moralis-server/lib/Routers/FunctionsRouter.js:119:13)
    at /moralis-server/lib/PromiseRouter.js:85:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

And I don’t see any of my NFTs in Your Collection although my wallet is connected to my React boiler and I just minted one on my new Mumbai smart contract that I configured in my React boiler.

I also see these errors on my Chrome console. I noticed some people here are getting the same error.

So I thought I need to upgrade moralis sdk and react-moralis library. So I run yarn upgrade --latest

And after running yarn start again I got the below on my React app screen.

Compiled with problems:X

ERROR in ./src/App.jsx 172:40-46

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)


ERROR in ./src/App.jsx 214:39-47

export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)


ERROR in ./node_modules/@ethereumjs/common/node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\@ethereumjs\common\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/@ethereumjs/common/node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\@ethereumjs\common\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/@ethereumjs/common/node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\@ethereumjs\common\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/@ethereumjs/tx/node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\@ethereumjs\tx\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/@ethereumjs/tx/node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\@ethereumjs\tx\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/@ethereumjs/tx/node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\@ethereumjs\tx\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\eth-lib\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/account.js 8:13-30

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/object.js 8:13-30

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/ethereumjs-util/dist/index.js 17:13-30

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\ethereumjs-util\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/swarm-js/node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\swarm-js\node_modules\eth-lib\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-eth-accounts\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }


ERROR in ./node_modules/web3-eth-accounts/node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-eth-accounts\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/web3-eth-accounts/node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-eth-accounts\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/web3-eth-accounts/node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-eth-accounts\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-providers-http\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-providers-http\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/web3-providers-ws/lib/helpers.js 11:12-26

Module not found: Error: Can't resolve 'url' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-providers-ws\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/web3-utils/node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-utils\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/web3-utils/node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-utils\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/web3-utils/node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\web3-utils\node_modules\ethereumjs-util\dist.browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can't resolve 'url' in 'C:\ethereum-nft-marketplace-boilerplate\node_modules\xhr2-cookies\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }

I’m one mm from giving up. I hope my error log above could help others to troubleshoot the problem. Anyway, thanks go to @cryptokid and @YosephKS for being soo responsive and helpful.

Hey @qwerty, don’t give up! I have the same problem, everything was working fine until not long ago, can’t fetch NFTs anymore. I’m also on the Singapore server.

As for your new errors after updating your packages, I can help with the first 2:

  • ‘Switch’ has been replaced by ‘Routes’. See here. Just edit accordingly.
  • ‘Redirect’ has been replaced by ‘Navigate’. See here. Just edit accordingly.

About the polyfills not injected anymore in webpack5, it seems to be a real PITA for now (at least for me haha!). Did waste a few hours on it before giving up, and starting fresh again from the “non-updated” boilerplate eventually. Interested to hear if anyone has a solution for that.

1 Like

Thanks so much @pedrojok. I’ll try your solution. I guess that’s what forums are for, to help each other out!

1 Like

I guess this might be why:

https://status.moralis.io/

1 Like

that’s a long list. I guess we just have to wait for the good people at Moralis.

Hi All,

I have created a full features version of this demo NFT version (as in the video) by re-adding the menu items of the standard Ethereum-boilerplate.

Added Fantom logo, but not enabled as network (Chains.jsx)

Corrected the warnnings, cleaned the code
=> no warnings / errors (local) version

@IAmJaysWay
I have created a pull request to the original repo (of Moralis), but do i need to click the “Close pull request”-button to finish this request?

The full featured version can also be found here:

@IAmJaysWay
What (truffle migrate) steps are needed to deploy to BSC, Fantom, Ethereum testnet and mainnets ? Can you provide the steps needed?

Success!

1 Like

Thank you very much :+1:

1 Like

Good afternoon! I’ve completed the tutorial, done my syncing to moralis, its tracking the items that I’m listing with all details, it shows on the explore page but when you click buy the message ‘This NFT is currently not for sale’ pops up. All items show on smart contract on mumbai network. Not sure where I am going wrong can anyone help out a beginner. Thank you in advance

Ok, I figured out the above but now I’m receiving this error as shown, can anyone shed any light? Thanks again

I follow every single step in tutorial but unable to see those nfts modals which are showing in the video tutorial. Like when I run the basic project by cloning it is not showing me the nft modals what is that issue please help?

can you help me in my problem I am beginner stuck in a logical error failed to render nfts cards on my page

My web app gets Compiles with Some warnings but it shows a blank screen on the localHost
Can Anyone Help

Hey bro, send me over your code for App.jsx. If it’s blank it’s most likely because you delete all of your headings for Dapp or maybe you haven’t properly sorted out your imports in

Send your code over I’ll have a look…

Hi @ivan, @IAmJaysWay,

At github repo of this project i see a large (truncate when viewed) data folder with wallet files…

Are these necessary to fork and keep or can i add this data folder to .gitignore ?

Hi @syedusmanzafar,

You will have to have NFTs in your wallet that is authenticated to the dApp, for the “Your Collection” page to show any NFTs. So be sure to mint or send over a few NFT’s to that wallet on the chain of your choosing.