BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

[vivekascoder]

Description
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
I am using the following versions

...
"dependencies": {
    "@taquito/beacon-wallet": "^11.1.0",
    "@taquito/taquito": "^11.1.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },
...

Steps To Reproduce
Steps to reproduce the behavior:
Import TezosToolkit or BeaconWallet

Expected behavior
Should not give error

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser Brave
• Version 1.33.106 Chromium: 96.0.4664.110 (Official Build) (arm64)

[claudebarde]

I use @taquito/taquito and @taquito/beacon-wallet with webpack version 5 with MyTezosDefi without any issue.
Is it possible another package you are using raises this error?

[vivekascoder]

I pasted all the dependencies here. I just created the react project with CRA and installed taquito and beacon-wallet.

[roxaneletourneau]

Hi @vivekascoder,
If you are using webpack 5, you need to include a polyfill. Here is an example from the project Claude mentioned above: https://github.com/claudebarde/my-tezos-defi/blob/main/webpack.config.js#L19

[callmekatootie]

I am looking for a better solution - but sadly I had to eject my create react app and then add the polyfill as mentioned by @roxaneletourneau above. Additionally, I also had to add polyfill for url module through url-polyfill module.

But this still does not seem to solve these WARNINGS that we now see in the ejected reactjs app (which were seen before the eject as well):

WARNING in ./node_modules/xhr2-cookies/dist/errors.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/redacted/node_modules/xhr2-cookies/errors.ts' file: Error: ENOENT: no such file or directory, open '/redacted/node_modules/xhr2-cookies/errors.ts'
 @ ./node_modules/xhr2-cookies/dist/xml-http-request.js 47:15-34
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/@taquito/http-utils/dist/taquito-http-utils.es5.js 399:34-72
 @ ./node_modules/@taquito/taquito/dist/taquito.es5.js 8:0-69 6831:31-48 6831:67-88 7262:32-49 7262:69-90
 @ ./src/App.js 7:0-48
 @ ./src/index.js 7:0-24 11:33-36

Note that these are warnings - I can see my app running fine now but not sure how to resolve the warnings, which are quite a few (for different paths, but originating from taquito module itself).

[avysel]

Hello,

I have the same problem.

I create a React app with create-react-app my-app --template typescript. The example app is working.

Then I npm i @taquito/taquito, and import it in a component. Still OK

But when I add a new TezosToolkit somewhere, I have the same webpack error.

I changed the App.tsx file generated by create-react-app in two ways:

This one is OK, app is starting and displays "Hello":

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { TezosToolkit } from '@taquito/taquito';

function App() {
  return (
    <div>Hello</div>
  );
}

export default App;

This one is KO, with the webpack error at build time:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { TezosToolkit } from '@taquito/taquito';

function App() {
  const Tezos = new TezosToolkit("https://hangzhounet.api.tez.ie");
  return (
    <div>Hello</div>
  );
}

export default App;

I don't have this error on raw Typescript app, without React.

I also had to npm run eject my app and add the polyfills on webpack config. My app is OK now.

It seems there's a problem with Taquito and create-react-app.

[claudebarde]

You don't have access to the Webpack config file before ejecting your React app, so you cannot add the polyfills and it won't work if you are using Webpack 5.
Although annoying, the issue is not on the Taquito side but on the React side (Taquito keeps its dependencies up-to-date, which any library should do). I suspect this is a problem that apps using libraries that can run both in the browser and NodeJS will encounter. There is an open issue in React repo about supporting Webpack 5.

[melMass]

Another solution to avoid ejecting from CRA is to use craco or react-wired.

Thanks for the sample webpack file @claudebarde

[dvkam]

@vivekascoder if you downgrade your react-scripts to the previous version before v5 it will work. React scripts added Webpack 5 in their v5 version that was released some months ago. I suspect more people that use react will get problems over the coming months.

@melMass sumed it up pretty well in another convo: "A lot of library used in browsers are polymorphic (node + web) but definitely not all library maintainers are actually packaging them properly and webpack4 lead to this bad habit staying like that as it was auto polyfilling those node libs to work in the browser."

I opened a feature suggestion for Taquito to solve this issue forever.
#1528

[theworksofvon]

Did anyone ever find a solution to this problem ?

[dvkam]

@theworksofvon for now as temporary solution I would suggest to downgrade react-scripts dependencies from v5 to v4.0.3. Then you should get it work with no issues. As a general solution I hope the team will consider my proposal #1528

[melMass]

Did anyone ever find a solution to this problem ?

I can't find it now but I'll keep looking, but AFAIK there are discussions about re-adding the polyfills by default in WP5.

For now there are a few approaches, this is what we did for teia: https://github.com/teia-community/teia-ui/blob/main/craco.config.js

[danoshi]

I compared dependencies and the difference was in my older projects "react-scripts": "4.0.3", and in my fresh created it is "react-scripts": "5.0.0", so changing react-scripts back to 4.0.3 solved the problem for me.

[melMass]

I compared dependencies and the difference was in my older projects "react-scripts": "4.0.3", and in my fresh created it is "react-scripts": "5.0.0", so changing react-scripts back to 4.0.3 solved the problem for me.

This issue is meant for people that want to use react-scripts 5+, and hence Webpack 5

[mevannir]

Any solution for this please?