What happens if ChainId is not defined in the OpenSea 2.0 clone created with Next.js, Replit, thirdweb, and tailwind CSS?

Recently, I came across a tutorial on YouTube that caught my attention. It's about creating an Open Sea 2.0 clone with Next.js, Replit, thirdweb, Infura, and Tailwind CSS. The video used Rinkeby Network, but since it's not stable anymore, I switched to Goerli. However, I encountered a problem with the code:

erver.browser.development.js:5898:11)
error - pages/_app.js (7:23) @ MyApp
ReferenceError: ChainId is not defined
   5 |   return( 
   6 |    <ThirdWebProvider>
>  7 |      desiredChainId = {ChainId.Goerli}
     |                       ^
   8 |      chainRPC{{
   9 |       [ChainId.Goerli]: 'https://goerli.infura.io/v3/e5f83ad2d2814ff69492f524bd8a50a0'
  10 |    }}

I'm using replit as my source code editor. As a beginner, I thought following a step-by-step video tutorial would be helpful.

If you have any insights or solutions to this issue, please let me know. Thank you!

I'm struggling to figure out what went wrong in my code.

next.jstailwind-cssmetamaskreplitthirdweb

Answer №1

Make sure to bring in ChainId by including it from this location:

import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An issue with the "req" parameter in Middleware.ts: - No compatible overload found for this call

Currently, I am utilizing the following dependencies: "next": "14.1.0", "next-auth": "^5.0.0-beta.11", "next-themes": "^0.2.1", In my project directory's root, there exists a file named midd ...

typescriptnext.jsmiddlewarenext-auth

Implementing prop functions in Next.js applications

I've been working on passing the submitForm function from formControl to index.js (Home) in order to achieve the functionality of removing the form upon successful submission and displaying a success message. Despite referencing multiple examples, the ...

next.jsreact-hook-form

Sending data to GraphQL queries from an external queries.ts file within a React project

Currently, I am in the process of developing a Next.js application that utilizes GraphQL with ApolloClient to manage API requests. Initially, I had success in setting up a page that functioned correctly and retrieved the appropriate data by passing an ID t ...

reactjsnext.jsgraphqlapolloapollo-client

Accessing the host in NextJS using _document.js or _app.js

I am currently working on a NextJs website that operates on various hostnames. Upon the application's initialization, I need to fetch data from an API based on the specific URL where NextJS is deployed. For instance, if my NextJS is running on websit ...

reactjsnext.js

Creating a unique styleset in styled-jsx using custom ruleset generation

TL;DR What's the best way to insert a variable containing CSS rules into styled-jsx (using styled-jsx-plugin-sass)? In my JSX style, I have the following: // src/pages/index.tsx ... <style jsx> {` .test { height: 100vh; width ...

javascriptreactjssassnext.jsstyled-jsx

Tips on preventing Next.js from showing a loading state across the entire page when a specific section of the page sends a request

On my nextjs page, I'm using the loading.tsx approach which displays a loading spinner until the entire page is loaded. This works great, but I have encountered an issue with a popup card that loads upon hovering over a certain element. The problem ar ...

reactjsnext.jsserver-side-renderingnext.js13

The default theme has not been specified in Tailwind CSS

During my recent project, I utilized React, Next.js in combination with Tailwind CSS. In this project, I delved into styling customization by implementing react-slick for a specialized slider. To achieve the desired aesthetic, I made modifications to the r ...

javascriptcssreactjstailwind-cssreact-slick

Secure your website with the latest JWT cookie security measures

After storing a JWT with an expiry date set 30 days ahead, the question arises - is it secure to store this JWT in a cookie? The aim is for the token to persist beyond a single session, much like the "Keep me logged in" feature found on some websites. Se ...

javascriptnext.jscookiesjwt

Challenges with Apollo GraphQL: Struggling to get the GraphQLWsLink (Subscriptions) to work with Next.js due to issues with the WebSocket implementation

Recently, I set up a GraphQL server in Go by following a tutorial closely. My front-end is developed using Next.js and I'm currently working on creating a client to connect to the server. Despite referring to the subscription docs thoroughly, I can&ap ...

websocketgraphqlnext.jsapollo-client

Browsing data privacy is crucial, which is why I have decided to operate both servers on the same port to ensure that cookies are

In my project, the front end is built with Next.js and the backend uses Express and Node.js. These projects are currently running on different ports - the frontend on port 3000 and the backend on port 8080. While everything works fine locally and cookies a ...

node.jsreactjsazureexpressnext.js

The external library is incorrectly interpreting the path as null instead of its actual value when using usePathname - Next13

Recently, I encountered an issue with an external library that relied on the useRouter function to fetch the pathname. However, after transitioning to Next.js 13 and switching to usePathname instead of useRouter, I discovered that the hook was returning nu ...

next.js

Activate on-demand static regeneration with Next.js

I am thoroughly impressed by the functionality of Incremental Static Regeneration in Next.js. However, I am currently seeking a method to manually trigger static page regeneration as needed. It would be ideal to have a command that can be executed via an ...

javascriptnext.jsvercel

Sending product identification to content_ids for Facebook Pixel tracking

Looking to implement Facebook Pixel for tracking the ViewContent event on product pages. According to Facebook, it's necessary to provide content_ids or contents along with a content_type. I assume that the content_type should always be 'product ...

javascriptreactjsnext.jsfacebook-pixel

Setting a const value (true or false) based on the size of the window - a step-by-step guide

While studying, I encountered a challenge: In the code below, I need to dynamically set useState(false) based on the screen size. If the screen is larger than 947px, for instance, it should automatically be changed to true. The issue arises because sett ...

htmlcssreactjsnext.js

Menu that appears when selected in the CredentialsProvider() function within Next-Auth

While working on implementing the "CredentialsProvider" from Next-Auth, I have noticed that most examples only include text fields like 'usernames' and 'passwords'. I am curious if it is possible to incorporate a 'Menu list' ...

next.jscredentialsnext-auth

Importing an image from the public folder in a nested directory with Next.js

My images are stored in the public directory and all of my code is located in the src folder. Usually, when I try to import an image from src/page/page.js like: /image/logo/logo-dark.png, it works. But when I am importing images from the src/component/cor ...

javascriptreactjsnext.js

Can you explain the function of a digest attribute?

As a beginner in the world of NextJS, I am currently working on getting my first project ready for production. However, I encountered the following error: Application error: a client-side exception has occurred (see the browser console for more information ...

javascriptreactjsnext.jshash

Managing authentication within getStaticProps requests

I am working on integrating a NextJs application with its backend in Laravel. Currently, all of our API routes in Laravel are secured using Laravel Sanctum to enhance security and prevent cross-site scripting attacks. One challenge I am facing is that th ...

reactjsnext.js

The `href` property did not match in Next.js server

I encountered this error while working on my Next.js project and refreshing the page. https://i.stack.imgur.com/aCipA.png The issue lies within the NavBar component, here is the code snippet: import Link from "next/link" import { useRouter} from ...

reactjsnext.js

Is there a solution for the error "Unable to persist the session" in a Next.js application that utilizes Supabase, Zustand, and Clerk.dev for authentication?

I have successfully set up a Next.js application with Clerk.dev for authentication and Supabase for data storage. I'm also leveraging Zustand for state management. However, an error is plaguing me, stating that there's "No storage option exists t ...

typescriptnext.jssupabasezustand