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

Question

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

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?

score 1 · Accepted Answer · answered Feb 18 '22 at 06:12

1

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

answered Feb 18 '22 at 06:12

Abhik Banerjee

357
1
6
9

Hi Abhik, option 1# works perfect, thankyou. As you, I was trying the option 2# as I saw it in numerous places but, in my case, as I am using create-react-app the webpack.config.js was inaccesible. The option `yarn eject` give me the file but it was a very long confusing one. Thank you again, great help. – Aitor Zaldua Feb 18 '22 at 09:43

score 0 · Answer 2 · answered Aug 30 '22 at 20:33

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.

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

2 Answers2