Build failing on Now when using openzeppelin-network.js

Archive SDK
1

Hi,

I am not sure why but recently builds have started failing on Zeit now when using openzeppelin-network.js :

Cannot find module: '@openzeppelin/network/react'. Make sure this package is installed.

Running "npm run build"
    09:55:50 PM > baseth@0.1.0 build /fargate/401a9336
    09:55:50 PM > react-scripts build
    09:55:52 PM Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.
    09:55:52 PM Creating an optimized production build...
    09:55:56 PM Failed to compile.
    09:55:56 PM ./src/App.js
    09:55:56 PM Cannot find module: '@openzeppelin/network/react'. Make sure this package is installed.
    09:55:56 PM You can install this package by running: yarn add @openzeppelin/network/react.
    09:55:56 PM npm
    09:55:56 PM ERR! code ELIFECYCLE
    09:55:56 PM npm
    09:55:56 PM ERR! errno 1
    09:55:56 PM npm
    09:55:56 PM ERR! baseth@0.1.0 build: `react-scripts build`
    09:55:56 PM npm ERR!
    09:55:56 PM Exit status 1
    09:55:56 PM npm ERR!
    09:55:56 PM npm
    09:55:56 PM ERR! Failed at the baseth@0.1.0 build script.
    09:55:56 PM npm ERR!
    09:55:56 PM This is probably not a problem with npm. There is likely additional logging output above.
    09:55:56 PM npm ERR! A complete log of this run can be found in:
    09:55:56 PM npm ERR! /fargate/.npm/_logs/2019-10-14T19_55_56_406Z-debug.log
    09:55:56 PM Error: Exited with 1
    09:55:56 PM at ChildProcess.child.on (/fargate/40f9385d99dd2d94/.build-utils/.builder/node_modules/@now/static-build/dist/index.js:23548:24)
    09:55:56 PM at emitTwo (events.js:126:13)
    09:55:56 PM at ChildProcess.emit (events.js:214:7)
    09:55:56 PM at maybeClose (internal/child_process.js:925:16)
    09:55:56 PM at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
    09:55:56 PM worker exited with code 20 and signal null
    09:55:58 PM done

the version I am using is

"dependencies": {
  "@openzeppelin/network": "^0.2.10",

and I am importing it as usual

import { useWeb3Injected } from '@openzeppelin/network/react';

It only happen with now deploy, local now dev or npm run start run fine...

Cheers

2 Likes
2

Hi @lil,

Welcome to the community :wave:.

I hadn’t used ZEIT Now previously (so apologies if my setup is different from yours).

I was able to deploy a very simple react application (using create-react-app) with openzeppelin-network.js and didn’t get any errors. (see code below).

I am also using "@openzeppelin/network": "^0.2.10"

Are you able to share your code or repository?
Have you tried using version 2.9?

src/App.js

import React from 'react';
import './App.css';

import { useWeb3 } from '@openzeppelin/network/react';

import Web3Info from './components/Web3Info/index.js';

// const infuraProjectId = process.env.REACT_APP_INFURA_PROJECT_ID;
const infuraProjectId = '95202223388e49f48b423ea50a70e336';

function App() {

  const web3Context = useWeb3(`wss://rinkeby.infura.io/ws/v3/${infuraProjectId}`);

  return (
    <div className="App">

      <div>
        <div>
          <Web3Info title="Web3 Provider" web3Context={web3Context} />
        </div>
      </div>
    </div>
  );
}

export default App;

src/components/Web3Info/index.js

import React, { useState, useEffect, useCallback } from 'react';

export default function Web3Info(props) {
  const { web3Context } = props;
  const { networkId, networkName, accounts, providerName, lib } = web3Context;

  const [balance, setBalance] = useState(0);

  const getBalance = useCallback(async () => {
    let balance =
      accounts && accounts.length > 0 ? lib.utils.fromWei(await lib.eth.getBalance(accounts[0]), 'ether') : 'Unknown';
    setBalance(balance);
  }, [accounts, lib.eth, lib.utils]);

  useEffect(() => {
    getBalance();
  }, [accounts, getBalance, networkId]);

  const requestAuth = async web3Context => {
    try {
      await web3Context.requestAuth();
    } catch (e) {
      console.error(e);
    }
  };

  const buttonStyle = {
    color: 'blue',
    cursor: 'pointer',
  };

  const requestAccess = useCallback(() => requestAuth(web3Context), []);

  return (
    <div>
      <h3> {props.title} </h3>
      <div>Network: {networkId ? `${networkId} – ${networkName}` : 'No connection'}</div>
      <div>Your address: {accounts && accounts.length ? accounts[0] : 'Unknown'}</div>
      <div>Your ETH balance: {balance}</div>
      <div>Provider: {providerName}</div>
      {accounts && accounts.length ? (
        <div>Accounts & Signing Status: Access Granted</div>
      ) : !!networkId && providerName !== 'infura' ? (
        <div>
          <br />
          <div style={buttonStyle} onClick={requestAccess}>Request Access</div>
        </div>
      ) : (
        <div></div>
      )}
    </div>
  );
}
3

Hi @abcoathup

Thanks for your help.
I haven’t figured it out yet but like you say I can & most often works (it always does locally).

If I find something interesting that can help I will post it here.

Anyway thanks for openzeppelin-network.js, it is really great & make things more tidy (I always wonder why it doesn’t get more stars on Github??)

Cheers

2 Likes
4

Hi @lil,

Is the error on ZEIT Now always occurring or is it intermittent? Let me know if you find anything which could help track this down as would great to be able to reproduce and then resolve.

Great to hear that you like OpenZeppelin Network.js.

It is still fairly new, it was only announced in late July.

I would appreciate any suggestions you have on how to get the word out to more developers.

5

Hi,

It is now occurring all the time on now. I once could solve it when I upgraded the lib to 0.2.10 but then it started again.
I will investigate it further & let you know but from my experience sometime things break in now for various reasons.

Cheers

2 Likes
6

Hey @lil. Thank you for using OpenZeppelin network.js and I am sorry for issues you experience.
Network.js use preinstall npm hook to create symlink for react hooks. I think for some reason this symlink is not creatd on Zeit platform.
Can you try to import hooks directly from openzeppelin/network/lib/react and check if it makes any difference?

Example:

import { useWeb3Network, useEphemeralKey, useWeb3Injected } from '@openzeppelin/network/lib/react';

Hope it works for you and let me know how it goes!

1 Like
7

Hello @ylv-io,
The workaround works great, many thanks :laughing:
(what I did until now was to downgrade to oz network 0.2.5 as I couldn’t find a fix)
Thank you for your help & have a nice day !

2 Likes