setupLoader from '@openzeppelin/contract-loader' causes "Can't resolve fs" errors with webpack

Archive SDK
1

I’m trying to use setupLoader in a React app.

As soon as I import it and call it, I get build errors saying “Can’t resolve fs” in a number of modules.

Stack Overflow says add node: { fs: ‘empty’ }, to webpack.config. That does remove the build error but then the app crashes.

Is there an easy solution or am I going to have to load my contracts the hard way?

Actually, can you load upgradeable contracts without the oz loader or is that a problem?

2 Likes
2

Hi @MWaser,

Contract Loader requires file system access to load contracts, see open Issue: https://github.com/OpenZeppelin/openzeppelin-contract-loader/issues/12.

You can use any mechanism to load upgradeable contracts, just need to specify the address of the proxy contract and the ABI of the logic contract.

3

So . . . . I’m going old fashioned and . . . . I’m getting type errors . . . . :frowning:

import caGBAToken from “…/build/contracts/GBAToken.json”
const contract = new web3.eth.Contract(caGBAToken.abi, deployedAddress)

Error	TS2345	(TS) Argument of type '({ constant: boolean; inputs: { name: string; type: string; }[]; name: string; outputs: { name: string; type: string; }[]; payable: boolean; stateMutability: string; type: string; anonymous?: undefined; } | { ...; })[]' is not assignable to parameter of type 'AbiItem | AbiItem[]'.

  Type '({ constant: boolean; inputs: { name: string; type: string; }[]; name: string; outputs: { name: string; type: string; }[]; payable: boolean; stateMutability: string; type: string; anonymous?: undefined; } | { ...; })[]' is not assignable to type 'AbiItem[]'.

    Type '{ constant: boolean; inputs: { name: string; type: string; }[]; name: string; outputs: { name: string; type: string; }[]; payable: boolean; stateMutability: string; type: string; anonymous?: undefined; } | { ...; }' is not assignable to type 'AbiItem'.

      Type '{ constant: boolean; inputs: { name: string; type: string; }[]; name: string; outputs: { name: string; type: string; }[]; payable: boolean; stateMutability: string; type: string; anonymous?: undefined; }' is not assignable to type 'AbiItem'.

        Types of property 'stateMutability' are incompatible.

          Type 'string' is not assignable to type 'StateMutabilityType'.
1 Like
4

If I remove all instances of StateMutability (since it is optional), I get other type errors :frowning:

1 Like
5

Sigh. I think that I’m just going to clone contract-loader and add a function with a signature where you pass in an imported artifact file rather than a string. Should be a simple fix (and,yes, I’ll PR it when it works).

1 Like
6

Nope. Not going to work. Get down to exactly the same call.

What is really weird is that I altered node_modules/web3-utils/types/index.d.ts so that SiteMutability was a string and not SiteMutabilityType and I’m still getting the error (and I changed SiteMutabilityType to string).

It seems as if it is grabbing the types from somewhere else . . . . :frowning:

1 Like
7

I even shortened the abi down to

let abi = [
            {
                "constant": false,
                "inputs": [
                    {
                        "name": "spender",
                        "type": "address"
                    },
                    {
                        "name": "amount",
                        "type": "uint256"
                    }
                ],
                "name": "approve",
                "outputs": [
                    {
                        "name": "",
                        "type": "bool"
                    }
                ],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            }]

and still no joy.

Any clues?

1 Like
8

Yeah. There seems to be a typing conflict somewhere among my node modules. Bleah!

1 Like
9

Hi @MWaser,

You could look at the example in the Building a GSN-powered DApp guide, which shows using web3 to load an upgradeable contract.
https://docs.openzeppelin.com/learn/sending-gasless-transactions#creating-the-dapp

10

Hi @MWaser,

Checking in to see if you were able to use web3 to load your contract?

11

Yes. Thank you.

It took me a while because the current web3 errors out while compiling on Azure (you have to update the Node version to the really old 8.9.4 from something that is prehistoric). [I mention that in case someone comes to you with the same problem]

1 Like