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
- Wrap the component tree (or the screen using useBaseAssetId) in the Fuel provider so useProvider() returns a connected Provider.
- Ensure the provider has finished connecting before rendering consumers (gate on its connection status).
- Only call useBaseAssetId within components mounted under the provider.
- 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
- Always wrap the app tree with the Fuel provider component.
- Gate provider-dependent hooks behind the provider's connection-ready state.
- Only mount components using these hooks under the provider subtree.
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.