FuelLabs/fuels-ts · error · Error

Provider not found

Error message

Provider not found

What it means

Thrown by the useBaseAssetId React hook (create-fuels-counter-guide app) inside its react-query queryFn when useProvider() returns a falsy provider. The hook cannot call provider.getBaseAssetId() without a connected Provider, so it throws a plain Error (not a FuelError). This is a guard for missing wallet/network context in the React tree.

Source

Thrown at apps/create-fuels-counter-guide/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 component tree (or the screen using useBaseAssetId) in the Fuel provider so useProvider() returns a connected Provider.
  2. Ensure the provider has finished connecting before rendering consumers (gate on its connection status).
  3. Only call useBaseAssetId within components mounted under the provider.
  4. Provide a fallback UI while the provider is unavailable.

Example fix

// before
function App() {
  return <Counter />; // useBaseAssetId throws
}

// after
import { FuelProvider } from '@fuels/react';
function App() {
  return (
    <FuelProvider>
      <Counter />
    </FuelProvider>
  );
}
Defensive patterns

Strategy: try-catch

Validate before calling

import { useProvider } from '@fuels/react';
// before calling useBaseAssetId, ensure a provider exists:
const { provider } = useProvider();
if (!provider) throw new Error('Mount this component under <FuelProvider>');

Type guard

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

Try / catch

// In a consuming component:
const q = useBaseAssetId();
// react-query surfaces 'Provider not found' as q.error; render a fallback:
if (q.error) return <p>Connect to a Fuel provider first.</p>;

Prevention

When it happens

Trigger: Rendering a component that calls useBaseAssetId() without a <FuelProvider> (or equivalent) ancestor providing a Provider via @fuels/react context. The queryFn runs, sees provider is undefined/null, and throws 'Provider not found'.

Common situations: Forgetting to wrap the app in the Fuel provider component. Provider still initializing/connecting when the query first runs. Wrong import or context boundary. Using the hook outside the FuelReact context after a refactor.

Related errors


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