web3-react | maximally extensible , dependency minimized framework | Frontend Utils library

I had the same problem when using web3 with react and webpack 5. This helped me solve it. I followed option #1 as I couldn't get the other option to work (my main confusion being where to keep webpack.config.js since I had kept it at the root and it was not being picked up).

As the error states, you need to have react 15 or 16 installed. Your package.json currently has react 17 instead. Change it to:

It is probably not easily possible.

(Note: actually I'm thinking of a webpack setup right now. I never used parcel, as recommended in the comments to your question, and I don't know the possibilities there)

HTML and the React app source code are very different technologies, basically:

• React is Javascript / JSX / Typescript / ... code that is compiled and generates HTML pages, and
• a HTML website is HTML pages, (probably) including some javascript code

React code just doesn't know anything about the static HTML files, and the HTML files can not compile the React code.

The React app includes e.g. these technologies:

• modules (see also How to isolate components in React app.js bundle)
• Typescript, needs to be "compiled out"
• JSX, needs to be compiled to javascript

There are solutions (more or less) for all these individual technologies, but in combination it becomes quite complicated, and it's probably less work to refactor the whole HTML website to React code (or more efficient to do it all at once, instead of bit by bit).

There are some different approaches:

• Build a React app and copy the old HTML code into it
• HTML pages, ReactDOM.render() in one or more places
• React code using dangerouslySetInnerHTML
• Setup some complex tooling and workflow that is combining the old HTML code and the HTML code that is generated by React, after the React compiling
• ...

See also:

• How to embed React Components in html pages
• How to use React components as part of legacy HTML/JS app

There is an issue in the library describing this exact problem with the solution here: https://github.com/NoahZinsmeister/web3-react/issues/126#issuecomment-783057749

Seems like you have to call web3React.activate() in your App.js with whatever connector you want to use. So for example with the @web3-react/injected-connector:

According to this

Finally found a solution! I was trying to use the example in the official library using ... but for some reason it wasn't working though no error came out. Then I stumbled upon some guy who had the same issue and posted on reddit and got a good answer that works for me. This is the link to the post: https://www.reddit.com/r/ethdev/comments/nw7iyv/displaying_connected_wallet_after_browser_refresh/h5uxl88/?context=3 and this is the code from that post:

First create a file that holds the injectedConnector called connectors.js: