Using `safe-app-wagmi` generate typing errors on a Vue project during build.

[re2005]

trafficstars

Interesting using this package in a VUE project as a connector works fine, @ running time.

import { SafeConnector } from '@gnosis.pm/safe-apps-wagmi';
const connector = new SafeConnector({ chains })

But when comes to build, eslint is complaining about typing not being used correctly.

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:1:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

  1 import {
    ~~~~~~~~
  2   FiatCurrencies,
    ~~~~~~~~~~~~~~~~~
...
  9   SafeMultisigTransactionsResponse,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 10 } from './common'
    ~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:2:3 - error TS1444: 'FiatCurrencies' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

2   FiatCurrencies,
    ~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:3:3 - error TS1444: 'OwnedSafes' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

3   OwnedSafes,
    ~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:4:3 - error TS1444: 'SafeBalanceResponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

4   SafeBalanceResponse,
    ~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:5:3 - error TS1444: 'SafeCollectibleResponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

5   SafeCollectibleResponse,
    ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:6:3 - error TS1444: 'SafeIncomingTransfersResponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

6   SafeIncomingTransfersResponse,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:7:3 - error TS1444: 'SafeInfo' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

7   SafeInfo,
    ~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:8:3 - error TS1444: 'SafeModuleTransactionsResponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

8   SafeModuleTransactionsResponse,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:9:3 - error TS1444: 'SafeMultisigTransactionsResponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

9   SafeMultisigTransactionsResponse,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:11:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

 11 import {
    ~~~~~~~~
 12   MultisigTransactionRequest,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 16   TransactionListPage,
    ~~~~~~~~~~~~~~~~~~~~~~
 17 } from './transactions'
    ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:12:3 - error TS1444: 'MultisigTransactionRequest' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

12   MultisigTransactionRequest,
     ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:13:3 - error TS1444: 'TransactionDetails' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

13   TransactionDetails,
     ~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:14:3 - error TS1444: 'SafeTransactionEstimation' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

14   SafeTransactionEstimation,
     ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:15:3 - error TS1444: 'SafeTransactionEstimationRequest' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

15   SafeTransactionEstimationRequest,
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:16:3 - error TS1444: 'TransactionListPage' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

16   TransactionListPage,
     ~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:18:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

18 import { ChainListResponse, ChainInfo } from './chains'
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:18:10 - error TS1444: 'ChainListResponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

18 import { ChainListResponse, ChainInfo } from './chains'
            ~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:18:29 - error TS1444: 'ChainInfo' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

18 import { ChainListResponse, ChainInfo } from './chains'
                               ~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:19:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

19 import { SafeAppsResponse } from './safe-apps'
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:19:10 - error TS1444: 'SafeAppsResponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

19 import { SafeAppsResponse } from './safe-apps'
            ~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:20:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

20 import { DecodedDataRequest, DecodedDataResponse } from './decoded-data'
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:20:10 - error TS1444: 'DecodedDataRequest' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

20 import { DecodedDataRequest, DecodedDataResponse } from './decoded-data'
            ~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:20:30 - error TS1444: 'DecodedDataResponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

20 import { DecodedDataRequest, DecodedDataResponse } from './decoded-data'
                                ~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:21:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

21 import { MasterCopyReponse } from './master-copies'
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/api.ts:21:10 - error TS1444: 'MasterCopyReponse' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

21 import { MasterCopyReponse } from './master-copies'
            ~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/chains.ts:1:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

1 import { Page } from './transactions'
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/chains.ts:1:10 - error TS1444: 'Page' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

1 import { Page } from './transactions'
           ~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/common.ts:1:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

1 import { IncomingTransfer, ModuleTransaction, MultisigTransaction, Page } from '..'
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/common.ts:1:10 - error TS1444: 'IncomingTransfer' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

1 import { IncomingTransfer, ModuleTransaction, MultisigTransaction, Page } from '..'
           ~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/common.ts:1:28 - error TS1444: 'ModuleTransaction' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

1 import { IncomingTransfer, ModuleTransaction, MultisigTransaction, Page } from '..'
                             ~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/common.ts:1:47 - error TS1444: 'MultisigTransaction' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

1 import { IncomingTransfer, ModuleTransaction, MultisigTransaction, Page } from '..'
                                                ~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/common.ts:1:68 - error TS1444: 'Page' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

1 import { IncomingTransfer, ModuleTransaction, MultisigTransaction, Page } from '..'
                                                                     ~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/transactions.ts:1:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

1 import { AddressEx, TokenInfo } from './common'
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/transactions.ts:1:10 - error TS1444: 'AddressEx' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

1 import { AddressEx, TokenInfo } from './common'
           ~~~~~~~~~

node_modules/@gnosis.pm/safe-react-gateway-sdk/dist/types/transactions.ts:1:21 - error TS1444: 'TokenInfo' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

1 import { AddressEx, TokenInfo } from './common'

[mmv08]

@re2005 Is there a reproducible example? I believe something might be wrong with the typescript configuration of your project

[re2005]

Thanks @mikhailxyz you were right, I was using the wrong command to build. Now the build goes good.

But same problem as before on running time, once I connect using the new SafeConnector({}),

I get an error, But in any way the connector continues to works.

I'm sure I'm doing something wrong here. Can you give an example of the chains object to initialise the class SafeConnector ? I'm using a empty object here. seems to work as well, but not sure if the error is related to that.

I've a repository with the example code: https://github.com/re2005/vue-gnosis-safe

It's also running here: https://vue-gnosis-safe.vercel.app/

Thanks for your time! Cheers

[mmv08]

@re2005 chains are wagmi thing, please refer to wagmi documentation or you can also check the example react application as the wagmi initialization code is framework agnostic https://github.com/safe-global/safe-apps-sdk/blob/master/examples/wagmi/src/index.tsx#L23

[re2005]

Thanks again. I figure the $chain initialisation data.

What about the error, is anything you recon from it.

[mmv08]

@re2005 Have you tried to pass the correct chains object an see if the error is still there? in your repository example I can see that you initialize the connector without passing chains

[mmv08]

ahh chains is optional, let me check it

[mmv08]

I cannot run the project, this is what I get when I run npm run dev:

 vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 107ms.

✘ [ERROR] Could not resolve "@wagmi/core"

    node_modules/@gnosis.pm/safe-apps-wagmi/dist/index.js:23:23:
      23 │ const core_1 = require("@wagmi/core");
         ╵                        ~~~~~~~~~~~~~

  You can mark the path "@wagmi/core" as external to exclude it from the bundle, which will remove
  this error. You can also surround this "require" call with a try/catch block to handle this
  failure at run-time instead of bundle-time.

[re2005]

Thank again for your time. I don't really have the dependency issue. Also deployed on Vercel without problems, it may be something isolated on your side.

But the error I mentioned is this invalid address triggered by the getAddress() method.

[mmv08]

Are you sure you have the up-to-date code in the repo? I don't see wagmi/core as a dependency, and this is what the error is about

[re2005]

I'm 100% sure, this app was deployed to Vercel without any issue.

If a dependency would be missing it wouldn't be deployed ?

Maybe is a sub dependency from @gnosis.pm/safe-apps-wagmi that is not there ?

Is actually a dev dependency: https://github.com/safe-global/safe-apps-sdk/blob/master/packages/safe-apps-wagmi/package.json

[mmv08]

@re2005 this is the connector dev dependencies, they're not related to your project. please check https://github.com/safe-global/safe-apps-sdk/tree/master/packages/safe-apps-wagmi#installation for installation instructions

[re2005]

Oh @gnosis.pm/safe-apps-wagmi @wagmi/core I see, sorry about that.

I've updated the code, still the invalid address issue I'm not sure where it comes from.

Thanks again!

[mmv08]

Hey, we're closing this issue because we could not reproduce the problem.