FuelLabs/fuels-ts · error · Error

Provider not found

Error message

Provider not found

What it means

Thrown by the useBaseAssetId React hook (nextjs template) inside its react-query queryFn when useProvider() returns no provider. Identical logic to the other templates: the hook requires a connected Provider in the @fuels/react context to call provider.getBaseAssetId(); without it, the queryFn throws a plain Error 'Provider not found'.

Source

Thrown at templates/nextjs/src/hooks/useBaseAssetId.tsx:10

import { useNamedQuery, useProvider } from "@fuels/react";

export const useBaseAssetId = () => {
  const { provider } = useProvider();

  return useNamedQuery("baseAssetId", {
    queryKey: ["baseAssetId"],
    queryFn: async () => {
      if (!provider) {
        throw new Error("Provider not found");
      }

      return await provider.getBaseAssetId();
    },
    placeholderData: undefined,
  });
};

View on GitHub (pinned to b3f37c91ac)

Solutions

1. Wrap the Next.js app (e.g. in _app.tsx or a root layout) with the Fuel provider.
2. Make components using this hook Client Components ('use client') and ensure they render only after the provider connects.
3. Gate the hook usage behind the provider's connection-ready flag.
4. Confirm @fuels/react's provider is an ancestor in the React tree.

Example fix

// before
// pages/_app.tsx
export default function App({ Component }) {
  return <Component />; // useBaseAssetId has no provider
}

// after
import { FuelProvider } from '@fuels/react';
export default function App({ Component }) {
  return <FuelProvider><Component /></FuelProvider>;
}

import { useProvider } from '@fuels/react';
const { provider } = useProvider();
if (!provider) throw new Error('Wrap the app with <FuelProvider> in _app/layout');

const hasProvider = (ctx: ReturnType<typeof useProvider>): boolean =>
  ctx.provider != null;

const q = useBaseAssetId();
if (q.isError) return <FallbackUI reason="Provider not connected" />;

When it happens

Trigger: Calling useBaseAssetId() in a Next.js component that is not mounted under the Fuel provider context, so useProvider() returns undefined. The queryFn runs and immediately throws the guard error.

Common situations: Next.js pages/_app not wrapped with the Fuel provider. Server Component rendering a client hook before the provider is mounted. Provider connection still pending on first render. Mis-ordered providers after a Next.js upgrade.

Related errors

• Provider not found
• Provider not found
• RESPONSE_BODY_EMPTY
• INVALID_URL
• UNSUPPORTED_FEATURE

AI-assisted analysis of FuelLabs/fuels-ts@b3f37c91ac (2026-08-12). Data as JSON: /api/errors/394c78b867dfc719. Report an issue: GitHub.