opensea-js: 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.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 24 (2 by maintainers)

Most upvoted comments

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.

weiliang903 on Mar 31, 2022

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

mwelche on Jun 16, 2022

@JeroenJADS Hahah not really. It might be related to something else

ygtdmn on Apr 26, 2022

Here is what I did to fix the issue:

Moved to Next.js
Removed node_modules folder
Added this to package.json:

  "browser": {
    "fs": false,
    "path": false
  }

Edited next.config.js to be like this:

module.exports = {
    reactStrictMode: true,
    productionBrowserSourceMaps: false,
    webpack: (config, {}) => {
        config.resolve.fallback = {
            ...config.resolve.fallback,
            fs: false
        };
        return config;
    }
};

@JeroenJADS you are probably still using opensea.js 3.0+ because this error shouldn’t happen in v2. You need to remove your node_modules

ygtdmn on Apr 25, 2022