2

I have installed web3.js

npm install web3

my App.js

import React , {Component} from "react";
import web3 from "web3";
import detectEthereumProvider from '@metamask/detect-provider'  
import KryptoBird from "../abis/KryptoBird.json";

class App extends Component {

    render () {
        return (
            <div>
                <h1>NFT MarketPlace </h1>
            </div>
        )
    }
}



export default App;

but when I run

npm start 

I am getting below error [error after running react server][1]

If I comment on the import statement of web3 in the App.js file it works fine. I am having node version 16.

Any help will be appreciated !!! Thanks in Advance

4 Answers 4

0

This is related to webpack setting.

if you are using create-react-app, I posted an answer here:

https://stackoverflow.com/questions/70472965/web3-issue-react-application-not-compiling/70512623#70512623

If you are using webpack, here is related answer:

https://stackoverflow.com/questions/70559396/webpack-breaking-change

0

It's because you are using the new version of Webpack, I've fixed the problem with the poly-fill, you can see the complete implementation here :

https://github.com/EhsanParsania/React-Webpack5-Polyfill

0

For any one facing this issue. Just updating the web3.js version should resolve the issue. As you can check here: https://github.com/web3/web3.js/issues/5031 this issue had been resolved. And in case you are still facing it, you can reopen the related issue at GitHub.

-1

Web3 and Create-react-app If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Refer the Solution in the Below link

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.