What is the solution to resolving the websocket.onclose issue in Thirdweb?

I'm a beginner with next.js and I'm currently working on a website that utilizes web3 technology, so I need to incorporate thirdweb.

My first step was running the following command to add thirdweb to my project:

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers

Next, I made changes to app.tsx with these lines of code:

import '../styles/globals.css'
import type { AppProps } from 'next/app'

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

function MyApp({ Component, pageProps }: AppProps) {

  return (

<ThirdwebProvider desiredChainId={ChainId.Rinkeby}>

  <Component {...pageProps} />

</ThirdwebProvider>
  )

}

export default MyApp

However, I encountered the following error:

Call Stack
webSocket.onclose node_modules@coinbase\wallet-sdk\dist\connection\RxWebSocket.js (50:0)

Can someone please assist me with resolving this issue?

Answer №1

It's difficult to determine the exact issue just from this post, but you can begin by setting up thirdweb + Next.js with the CLI as recommended:

npx thirdweb create --app --next

I suspect the problem may be linked to the versions of the SDK you have installed - could you share those details with us?

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

Error: GraphQl files cannot be imported due to incorrect relative directory path

I am attempting to bring in a mutation from my GraphQL file into my LoginPage file using the following code: import LoginMutation from '../../graphql/login-mutation'; Unfortunately, I am encountering an error that states: import LoginMutation ...

TypeScript generic type and potential absence of a value

Recently, I've been delving into Facebook's immutable library and exploring their TypeScript bindings. Consider this snippet of code: const list: User[] = ...; list.map(user => ...) The lambda parameter user correctly has the type of User. ...

Error message: There appears to be a type error within the labelFunc of the KeyBoardDatePicker component in the Material-UI

I am currently working with a material-ui pickers component: <KeyboardDatePicker value={selectedDate} onChange={(_, newValue) => handleClick(newValue)} labelFunc={renderLabel} disableToolbar variant='inline' inputVariant=& ...

Troubles with Declaration Merging in Angular 2 Implementation

I'm currently working on incorporating a custom RxJS operator into my project, following the steps outlined in this particular answer. Below are the relevant code snippets from my application: rxjs-extensions.ts import { Observable } from 'rxjs ...

Issue arose while attempting to use Jest on a React Native application integrated with TypeScript (Jest has come across an unforeseen token)

Seems like everyone and their grandmother is facing a similar issue. I've tried everything suggested on Stack Overflow and GitHub, but nothing seems to work. It should be a simple fix considering my project is basic and new. Yet, I can't seem to ...

Just change "this.array[0]..." in the TypeScript code

There is a problem, this.myList[0], this.myList[1], this.myList[2], this.myList[3], // mylist data is 0 ~ 18... this.myList[18] I attempted to solve it by doing the following: for (let i = 0; i < this.myList.length; i++) { this.myList.push( ...

Angular2 karma testing encounters a surprising anonymous System.register invocation

As I try to run Karma Tests in Angular2, I encounter the following error message. An Unexpected anonymous System.register call is causing an Uncaught TypeError at http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?38538ebca96bc7b222f7e7ba ...

Guide on integrating TailwindCSS with the 'createGlobalStyles' component

I've been attempting to incorporate tailwind into my globalstyle styled components in order to establish base styles. The code provided below isn't functioning as expected. Any insights on how I can improve it? import {createGlobalStyle} from &a ...

Error encountered when using the refresh token API: "Value required for secretOrPrivateKey"

Upon user login to the API, a token is generated for access to other endpoints. However, this token expires within 60 seconds. I have implemented a function to generate a new valid token using the old token stored in the database. Yet, when attempting to c ...

Enhancing JavaScript functions with type definitions

I have successfully implemented this TypeScript code: import ytdl from 'react-native-ytdl'; type DirectLink = { url: string; headers: any[]; }; type VideoFormat = { itag: number; url: string; width: number; height: number; }; type ...

Substitute terms in a sentence according to the guidelines

Looking to transform strings based on specific rules? "Hello {{firstName}}, this is {{senderName}}." Consider the following rules: rules = { firstName: "Alex", senderName: "Tracy" } The expected output would be: "Hello Alex, this is Tracy." If yo ...

I continue encountering the Server Error message: "Error: The default export on page "/products/all" is not a React Component."

I have been trying to create a page to display all the products listed in my server.json file (shown below). { "products": [ { "slug": "live-by-the-sun-love-by-the-moon", "title": "Live by the sun, love by the moon.", "price" ...

The behavior of the Ionic checkbox in version 5 seems to be quite delayed

I am facing an issue with binding the checked attribute value on an ion-checkbox, as the behavior seems to be delayed. In my .ts file, I have an array variable named user_id. In my checkbox list, I am trying to populate this array based on which checkboxe ...

When using TypeScript, the reducer function may not be recognized, causing the type to display as 'any

I am a beginner in Typescript and we are implementing hooks in our React application. We have a shared thunk action creator that triggers one of the actions. appSlice.ts type ThunkOptions = { method: number, api_url: string, body: any | null } ...

Angular 2 - Troubleshooting Issues with Nested Components and @Input Propagation

The Logic by IMG I'm facing an issue with updating child component variables in real-time. I attempted to use @Input, but it only gets initialized and doesn't change over time. Parent Component <div> <h4>Рэйтынг : {{video ...

Retrieving component attributes using jQuery or alternate event handlers

In my Angular2 component, I am facing an issue with using vis.js (or jQuery) click events. Despite successfully displaying my graph and catching click events, I encounter a problem where I lose access to my component's properties within the context of ...

What could be causing the TypeScript type error within this Effector effect subscriber?

Working on a front-end application utilizing React, Typescript, Effector, FetchAPI, and other technologies. Created an Effector effect to delete an item in the backend: export const deleteItemFX = createEffect({ handler: (id: string) => { return ...

Encountering duplication issues when pushing objects into an array in Angular

Using EventEmitter in a service toshoppinglist = new EventEmitter<Ingredients[]>() Emitting method toshoppinglist() { this.slservice.toshoppinglist.emit(this.item.ingredients); } ingredients : Ingredient [] Subscribing to the emit event and ...

Is there a method to incorporate absolute paths in SCSS while working with Vite?

Currently, I am experimenting with React + Vite as webpack seems to be sluggish for me. My goal is to create a project starter, but I am facing difficulties in getting SCSS files to use absolute paths. Despite including vite-tsconfig-paths in my vite.confi ...

Experiencing a challenge with relative paths in Next.js when integrating with React

Hey there! I currently incorporate React with Fuse in the Front End, and utilize Nextjs for server operations. However, I've encountered an issue with Next regarding relative fuse paths. For instance, when using the relative path @history, it results ...