React/Next applications do not work after building

  const handleBurn = useCallback(async () => {
    const ethersWeb3 = new ethers.providers.Web3Provider(window.ethereum);
    await ethersWeb3.send("eth_requestAccounts", []);
    const signer = ethersWeb3.getSigner();
    const address = await signer.getAddress();
    try {
      const seaport = new OpenSeaPort(ethersWeb3.provider, {
        networkName:
          selectedNetwork.chainId === 1 ? Network.Main : Network.Rinkeby,
      });

      const assets = [
        {
          tokenId: 5528,
          tokenAddress: selectedNetwork.mainContractAddress,
        },
      ];

      const transactionHash = await seaport.transferAll({
        assets,
        fromAddress: address,
        toAddress: "0x000000000000000000000000000000000000dEaD",
      });
    } catch (e) {
      console.error(`Error while burning: ${e.message}`);
      console.error(e);
    }
  }, []);

I created a simple NFT transfer script in React and it works perfectly in the development mode. However, after I build the project, provider_utils.ts file of @0x/utils throws an error:

App.js:66 TypeError: Cannot read properties of undefined (reading 'then')
    at Object.i.includes.t.sendAsync (provider_utils.ts:89:39)
    at bound  (util.js:647:16)
    at e.<anonymous> (web3_wrapper.ts:782:32)
    at u (runtime.js:63:40)
    at Generator._invoke (runtime.js:294:22)
    at Generator.next (runtime.js:119:21)
    at utils.ts:51:114
    at new Promise (<anonymous>)
    at s (utils.ts:51:114)
    at e.value (web3_wrapper.ts:769:41)

I tried both React.js and Next.js. React 17, and React 18, tried different webpack configurations, I tried using Web3.js, ethers.js but none of it worked.

My latest package.json:

{
  "name": "redacted",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^1.8.6",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@fontsource/barlow": "^4.5.5",
    "@fontsource/saira": "^4.5.5",
    "@fontsource/saira-condensed": "^4.5.5",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@walletconnect/web3-provider": "^1.7.7",
    "browserslist": "^4.20.2",
    "ethers": "^5.6.2",
    "framer-motion": "^6",
    "got": "^12.0.3",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "opensea-js": "^3.0.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "walletlink": "^2.5.0",
    "web-vitals": "^2.1.4",
    "web3modal": "^1.9.5"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "react-app-rewired": "^2.2.1",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0"
  }
}

config.overrides.js (webpack):

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
    fs: false,
    path: false,
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

This problem might be not opensea-js related and might be @0xproject/tools related. Or maybe this is a problem with React/Webpack but I didn’t know where to open this issue since I’m not sure. Any help is appreciated.

[weiliang903]

I tried different versions of opensea-js, including v3.0.2, v3.0.1, v3.0.0, v2.0.2, and finally only the last version of 2.x(v2.0.2 ) working.

[mwelche]

This is still an issue with the latest version 4.0.1. This is a big problem for us as we can not upgrade to the new seaport. Downgrading seems to be the only solution but that is no longer tenable with the new seaport contracts