Consuming wagmi hooks via wrapper hooks bundled in an npm package.

[salieflewis]

I've got a simple hook like this that lives in an npm package. The wagmi client itself is in the consuming app. Any time I invoke this function, I get the error, 'no wagmi config found'.

export function useContractOwner() {
  const { tokenAddress } = useManagerContext()

  const { data: contractOwner } = useContractRead({
    address: tokenAddress,
    abi: tokenAbi,
    functionName: 'owner',
  })

  return {
    contractOwner,
  }
}

I know this was possible with previous versions of wagmi, and I've been following the conversations around this issue, React Query, SSR, and related concepts. Any advice would be greatly appreciated, and I'm happy to provide more context/spin up a sandbox if anyone can help.

[tmm]

Is this hook used inside a WagmiConfig? Is the package ESM-only?

[salieflewis]

The package uses preconstruct to bundle to both CJS and ESM. And the consuming app is inside a WagmiConfig provider, for sure!

[salieflewis]

@tmm I'm realizing now you might have been asking if there was only ESM written in the package, and that too is true. I'm not sure if it makes a difference, but the wagmi.ts file I have is located in the consuming app rather than the package. Is this the pattern you'd recommend?

Update

Was able to get this working inside of this template which uses the app router and tsup for bundling. Perhaps preconstruct is the culprit?

[tmm]

wagmi is a pure ESM package and publishes a separate CJS tag because of the dual package hazard. Likely what is happening is the useContractRead hook and the underlying readContract action aren't referencing the same wagmi config. The easiest way around this is to publish your package as ESM-only. In the future, we are going to rework how wagmi works to get around dual package hazard (e.g. remove global config).

[salieflewis]

Got it, thanks for the thoughtful reply.