Having difficulty accessing wagmi context in an external library. #4373

oveddan · 2024-11-01T22:09:17Z

oveddan
Nov 1, 2024

I'm trying to write an external library of helper hooks that internally call wagmi's hooks.

For example, this component useMintable in my external library my-react-lib:

"use client";

import { useChainId } from "wagmi";

import { useChainId } from '
const useMintable = () => {
   const chainId = useChainId();
}

I get this error:
"WagmiProviderNotFoundError: useConfig must be used within WagmiProvider."

...which doesn't make sense since this hook is called from within the wrapped provider component, as seen below:

In my Next app, which im generating using pnpm wagmi create:

layout.tsx:

"use client";

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { headers } from "next/headers";
import { type ReactNode } from "react";
import { cookieToInitialState } from "wagmi";

import { getConfig } from "../wagmi";
import { Providers } from "./providers";
import Account from "./components/Account";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Wagmi",
  description: "Generated by create-wagmi",
};

export default function RootLayout(props: { children: ReactNode }) {
  const initialState = cookieToInitialState(
    getConfig(),
    headers().get("cookie")
  );
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers initialState={initialState}>
          <Account />
          {props.children}
        </Providers>
      </body>
    </html>
  );
}

providers.tsx:

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { type ReactNode, useState } from "react";
import { type State, WagmiProvider } from "wagmi";

import { getConfig } from "@/wagmi";

export function Providers(props: {
  children: ReactNode;
  initialState?: State;
}) {
  const [config] = useState(() => getConfig());
  const [queryClient] = useState(() => new QueryClient());

  return (
    <WagmiProvider config={config} initialState={props.initialState}>
      <QueryClientProvider client={queryClient}>
        {props.children}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

page.tsx:

"use client";

import { useGetMintable } from "my-react-lib";

export default function Mint() {

  useGetMintable()

  return <></>
}

tmm · 2024-11-02T16:07:27Z

tmm
Nov 2, 2024
Maintainer

Usually see this in a monorepo or other environment, where there are multiple Wagmi versions installed. Happy to look into it if there's a minimal reproduction.

0 replies

oveddan · 2024-11-05T21:16:13Z

oveddan
Nov 5, 2024
Author

@tmm I've been able to repro in a mimimal turborepo example:

https://github.com/oveddan/wagmi-hook-issue-example

See the simple hook here: https://github.com/oveddan/wagmi-hook-issue-example/blob/main/packages/ui/src/useMint.ts
And where it is used here: https://github.com/oveddan/wagmi-hook-issue-example/blob/main/apps/web/src/app/page.tsx#L10

Both the UI package, as well as the web app, are using the same versions of wagmi and viem.

0 replies

Abdullah1738 · 2024-11-08T22:50:59Z

Abdullah1738
Nov 8, 2024

Having this same issue

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Having difficulty accessing wagmi context in an external library. #4373

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Having difficulty accessing wagmi context in an external library. #4373

oveddan Nov 1, 2024

Replies: 3 comments

tmm Nov 2, 2024 Maintainer

oveddan Nov 5, 2024 Author

Abdullah1738 Nov 8, 2024

oveddan
Nov 1, 2024

tmm
Nov 2, 2024
Maintainer

oveddan
Nov 5, 2024
Author

Abdullah1738
Nov 8, 2024