Process.binding is not defined in Gatsby + web3

I’m developing a web app on Gatsby using web3 and I have problems with the process.binding not defined. The develop works fine but not the build.

I understand that this comes from the process/browser not having “binding” and the fact I am not supposed to use Node.js functions but since it’s web3 which should work in the browser – Im not sure what to do.

Any direction will be appreciated. Have been banging my head at the wall for a while.

 ERROR 

Page data from page-data.json for the failed page "/[...]/": {
  "componentChunkName": "component---src-pages-js",
  "path": "/[...]/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": [],
  "matchPath": "/*"
}

failed Building static HTML for pages - 3.268s

 ERROR #95313 

Building static HTML failed for path "/[...]/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  175 |
  176 | process.binding = function (name) {
> 177 |     throw new Error('process.binding is not supported');
      | ^
  178 | };
  179 |
  180 | process.cwd = function () { return '/' };


  WebpackError: process.binding is not supported
  
  - browser.js:177 
    [artcart-buyers]/[process]/browser.js:177:1
  
  - index.js:7 
    [artcart-buyers]/[fs-minipass]/index.js:7:24
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - create.js:8 
    [artcart-buyers]/[tar]/lib/create.js:8:13
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - index.js:4 
    [artcart-buyers]/[tar]/index.js:4:13
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - files.js:19 
    [artcart-buyers]/[swarm-js]/lib/files.js:19:11
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - api-node.js:3 
    [artcart-buyers]/[swarm-js]/lib/api-node.js:3:13
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - index.js:23 
    [artcart-buyers]/[web3-bzz]/lib/index.js:23:13
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - index.js:34 
    [artcart-buyers]/[web3]/lib/index.js:34:11
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - static-entry.js:212 
    artcart-buyers/.cache/static-entry.js:212:27
  
  - Tokenizer.js:26 
    [artcart-buyers]/[stylis]/src/Tokenizer.js:26:1

the code for […].js:

import React from "react"
import { Auth0Provider } from "../utils/auth"
import  DataContextProvider  from "../utils/dataStore";
import EthereumContextProvider from "../utils/ethereumContext";
import { Router } from "@reach/router"
import PrivateRoute from "../components/PrivateRoute"
import Nft from '../components/pages/Nft'
import Transactions from '../components/pages/Transactions'
import Index from '../components/pages/Index'
import Account from '../components/pages/Account'
import "@ethersproject/shims"

const App = ({ element, location }) => {
    const isBrowser = typeof window !== "undefined"
    
    const onRedirectCallback = appState => {
        location.navigate(
          appState && appState.targetUrl
            ? appState.targetUrl
            : window.location.pathname
        )
      }

    if (isBrowser) {
        return (
            <>
            <EthereumContextProvider>
            <Auth0Provider
                domain={process.env.GATSBY_AUTH0_DOMAIN}
                client_id={process.env.GATSBY_AUTH0_CLIENTID}
                redirect_uri={window.location.origin}
                cacheLocation='localstorage'
                onRedirectCallback={onRedirectCallback}
            >
            <DataContextProvider>
            <Router>
                <PrivateRoute path="/" component={Index} />
                <PrivateRoute path="/nft" component={Nft} />
                <PrivateRoute path="/transactions" component={Transactions} />
                <PrivateRoute path="/account" component={Account} />
            </Router>
            </DataContextProvider>
            </Auth0Provider>
            </EthereumContextProvider>       
            </>
        )
    }
    else {
        return (
            <></>
        )
    }

}
export default App