FuelLabs/fuels-ts · error · Error

Provider not found

Error message

Provider not found

What it means

Thrown by the useBaseAssetId React hook (vite template) inside its react-query queryFn when useProvider() returns no provider. Same guard as the other templates: the hook needs a connected Provider from the @fuels/react context to invoke provider.getBaseAssetId(); a missing provider makes the queryFn throw 'Provider not found'.

Source

Thrown at templates/vite/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 Vite app root with the Fuel provider so useProvider() returns a connected Provider.
  2. Only mount components that use useBaseAssetId once the provider reports it is connected.
  3. Verify the provider component is an ancestor in the React tree.
  4. Show a loading/fallback state while the provider initializes.

Example fix

// before
// main.tsx
ReactDOM.createRoot(root).render(<App />); // no provider

// after
import { FuelProvider } from '@fuels/react';
ReactDOM.createRoot(root).render(
  <FuelProvider><App /></FuelProvider>
);
Defensive patterns

Strategy: try-catch

Validate before calling

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

Type guard

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

Try / catch

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

Prevention

When it happens

Trigger: Using useBaseAssetId() in a Vite React component that is rendered outside the Fuel provider context, so useProvider() returns undefined and the queryFn throws.

Common situations: main.tsx/App not wrapped with the Fuel provider. Provider still connecting on initial mount. Hook called in a route/component not under the provider subtree.

Related errors


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