ethereumjs | app built using the MEAN stack | Cryptocurrency library

Unfortunately, most of the Web3 stack relies heavily on window, browser and external, crypto dependencies which aren't available on server-side. This isn't just an issue with Gatsby, but other SSR and static site generators (e.g. Next.js) as well.

There are a few workarounds though. See Using Client-Side Only Packages on Gatsby

1. Use a different library or approach

2. Add client-side package via CDN

3. Load client-side dependent components with loadable-components

4. Use React.lazy and Suspense on client-side only

Depending on your requirements #1 is likely not an option. I've had better success using ethers, instead of web3. But you'll likely run into similar issues with other packages at some point.

A combination of #2 and 3/4 will be the way to go. First, remove the packages (web3) that are causing issues and load them either from gatsby-browser.js or using react-helmet on the page/component that's using it.

gatsby-browser.js

Looking at your package.json, it seems your are working on a client-side application. Such applications run in the client's browser, rather than in Node. Heroku is for running server-side applications, so it's probably not the right place to deploy your app.

Take a look at something like Vercel or Netlify instead. They provide tools to automatically build and deploy client-side applications to edge networks with only a few clicks.

As @AkilaDevinda suggested I looked for clean in code and found that I am using cleanExtractedImagesCache() function from library react-native-image-filter-kit.

Issue was that I had disabled auto-link for android in react-native.config.js

This bit of code looks wrong:

After a lot of trail and error an 0 suggestions on stack overflow working, i have got the transaction signing working!. In the end i came away from using ethereumjs-tx (which for some reason is recommended by a lot of people) and used just pure Web3.

Front end client

You are trying to use a service that is not listed in providers of your AppModule. Add the service to a providers list to make it work.

I think Airlancer has a point about the colliding of libraries if your scripts is not in a content_scripts.

It also says from this SO post that:

You shouldn't use background tag to add a js library. You're better off downloading and bundling your extension with required libraries and getting it as a content_script.

I can see you're refering to the web3js documentation. That documentation is made for one using the local node.As you're using the Infura as provider, you will face issues when you're gonna need to do transactions from your account. As you have stated that you didn't require to use the private key, that is because the deploy function here assumes that the account is already unlocked. You should refer "https://infura.io/docs" for the changes you will need to do while using the web3js library with infura as a provider. Also, you have to use the private key for signing the transaction (i.e.for paying the gas fee from your account)

Three possible scenarios:

1. You didn't set the owner correctly.

2. totalSupply is not 0 at that moment

3. You send a transaction with value to a not payable function