thirdweb-example / erc721

Create an NFT minting page using thirdweb's React SDK
https://nft-drop.thirdweb-preview.com/
Apache License 2.0
156 stars 190 forks source link

The demo is not working! It stays on the loading screen! #12

Closed xmbox closed 1 year ago

xmbox commented 1 year ago

Hello guys,

I am working on this repo.

It works successfully on localhost. However, when I get build with next.js and export it, it stays as "loading". Same with the current demo on github right now.

Is there anyone who has experienced the same problem? Your help is really appreciated.

jarrodwatts commented 1 year ago

Thanks for letting us know @3web3, we're taking a look into this

jarrodwatts commented 1 year ago

Hey @3web3 this should be fixed now - let me know if you're still running into any issues or i'll close this one!

xmbox commented 1 year ago

Hey @3web3 this should be fixed now - let me know if you're still running into any issues or i'll close this one!

Thanks for interest! It works fine on localhost. However, I still see the loading screen on my own server. Here are some things that might help you understand the problem:

`(base) **-MacBook-Pro nft-drop % npm run build

custom-minting-page@0.1.0 build next build && next export

./pages/index.tsx 67:11 Warning: Do not use <img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element 172:7 Warning: Do not use <img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element

./components/GitHubLink.tsx 31:9 Warning: Do not use <img> element. Use <Image /> from next/image instead. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element 31:9 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully info - Collecting page data
info - Generating static pages (3/3) info - Finalizing page optimization

Route (pages) Size First Load JS ┌ ○ / (792 ms) 1.74 kB 576 kB ├ └ css/81eeae6fe070e475.css 1 kB ├ /_app 0 B 575 kB └ ○ /404 195 B 575 kB

○ (Static) automatically rendered as static HTML (uses no initial props)

info - using build directory: /Users//Desktop/nft-drop/.next info - Copying "static build" directory info - No "exportPathMap" found in "/Users//Desktop/nft-drop/next.config.js". Generating map from "./pages" info - Launching 11 workers info - Copying "public" directory info - Exporting (3/3) Export successful. Files written to /Users/*/Desktop/nft-drop/out (base) ****-MacBook-Pro nft-drop % `

Ekran-Resmi-2022-10-26-19-08-45

`

<link rel="preload" href="/_next/static/css/81eeae6fe070e475.css" as="style"/>
<link rel="stylesheet" href="/_next/static/css/81eeae6fe070e475.css" data-n-p=""/>
<noscript data-n-css=""></noscript>
<script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
<script src="/_next/static/chunks/webpack-b3cd8567c8def8fa.js" defer=""></script>
<script src="/_next/static/chunks/framework-0ba0ddd33199226d.js" defer=""></script>
<script src="/_next/static/chunks/main-17c92827754f917d.js" defer=""></script>
<script src="/_next/static/chunks/pages/_app-db175c14072aca04.js" defer=""></script>
<script src="/_next/static/chunks/pages/index-713af52201ab7437.js" defer=""></script>
<script src="/_next/static/6Mx7jA-dtKlIkr_OnhJ3I/_buildManifest.js" defer=""></script>
<script src="/_next/static/6Mx7jA-dtKlIkr_OnhJ3I/_ssgManifest.js" defer=""></script>

Loading...
`

xmbox commented 1 year ago

I've published it on my own server before without any problems. This is a big problem for those who want to host on their own server like me.

jarrodwatts commented 1 year ago

You shouldn't need to build/export - I don't think that method will work.

You can deploy with a site that is Next.js compatible like Netlify or Vercel, here's a guide https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/

xmbox commented 1 year ago

You shouldn't need to build/export - I don't think that method will work.

You can deploy with a site that is Next.js compatible like Netlify or Vercel, here's a guide https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/

It was working before. I have successfully hosted it on my own server.

xmbox commented 1 year ago

Hello @jarrodwatts,

What might be causing this problem? My server supports node.js and it was working before. Can you take a look at this thread for those who want to host it on their own server? This is really much appreciated.

warengonzaga commented 1 year ago

This issue looks stale to me, can we close this? @eabdelmoneim @atharvadeosthale

ramykatour commented 1 year ago

Hi! when i trying to open demo get. Client ID is required as a query param to use this page.

avneesh0612 commented 1 year ago

@ramykatour should be fixed now

ramykatour commented 1 year ago

@ramykatour should be fixed now

thank you