🐛 [Bug report]: The main build fails when snap is enabled

[atapas]

Descrcibe the bug?

With a recent play got merged, the main build fails when the snap is enabled.

Here is the error:

The build works if the snap is disabled but we can not disable it as we will lose the meta information on plays and the image will not be shown when it is shared on the social media.

Steps to reproduce the bug?

• Clone/Fork the repo.
• If you already have the repo, make sure to pull the latest changes.
• Do yarn install
• Do yarn build
• You should get the error.

Expected behavior

The build should pass with the snap build command.

Desktop (Please provide your system information)

NA

Mobile (Please provide your device information)

NA

Screenshot / Screenshare

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[atapas]

@Sachin-chaurasiya tagging you here.

@nirban256 this fails after including the web3 play. Could you please check if you can help with any clue or fix it?

[nirban256]

@atapas checking it

[atapas]

@nirban256 I think I am getting a bit hang to it now.

This seems to be an issue of passing something undefined and ether js is throwing this error due to that. Please refer: ethers-io/ethers.js#1234

As the snap actually crawls through the pages, it must have passed some undefined value to ether and resulted this error. Please see if this gives you any clue to fix in any corner.

[atapas]

So what's the fix?

We use react-snap to pre-render the ReactPlay web app. The react-snap uses a headless Chrome to crawl all available links in the app. In our case, each of the play links will lead to its main component. As the main component loads by the crawler, this component's default useEffect (src/plays/web3-staking-dapp/Web3StakingDapp.js) runs.

const onload = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    setProvider(provider);

    const contract = new ethers.Contract(
      ContractAddress,
      artifact.abi
    )
    setContract(contract);
  }

  useEffect(() => {
    onload();
  }, [])

The code in the onload method uses a window.ethereum which is not available to the crawler and results in an undefined. So the provider is also undefined.

That's when we run the snap as a post-build process, it fails with the error explained here: #783 (comment).

As a fix, we handled the error with a try-catch.