CODEWITHSUNDEEP
reactjswebpackcreate-react-appweb3-react
Aitor Zaldua
Aitor Zaldua

Reputation: 33

Error message with: Web3 + create-react-app + webpack 5

I am writing the frontend for a Dapp. I have the script /src/config/index.js

import Web3 from 'web3';

const getLibrary = (provider) => {

    return new Web3(provider);
};

export { getLibrary };

And the /src/index.js where I am trying to import getLibrary:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';
import { ChakraProvider } from '@chakra-ui/react';
import { Web3ReactProvider } from '@web3-react/core';
import { getLibrary } from './config/web3';

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <ChakraProvider>
        <Web3ReactProvider getLibrary={getLibrary}>
          <App />
        </Web3ReactProvider>
      </ChakraProvider>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

But, I have the error enter image description here

The line responsible for the error is:

import { getLibrary } from './config/web3';

I used create-react-app to build the project. I have try several ideas but nothing is working for me... any help, please?

Upvotes: 0

Views: 368

Answers (2)

Robert Brisita
Robert Brisita

Reputation: 5844

For anyone looking to resolve this still (2022-08-30), I recommend reading this article:

https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5

It will be different in regards to your dependencies but it helped resolve my issues. It basically adds support back in by rerouting requests to dependencies using the react-app-rewired package.

Upvotes: 0

Abhik Banerjee
Abhik Banerjee

Reputation: 377

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).

Upvotes: 1

Related Questions