{"record":{"id":"394c78b867dfc719","repo":"FuelLabs/fuels-ts","slug":"provider-not-found-394c78","errorCode":null,"errorMessage":"Provider not found","messagePattern":"Provider not found","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"templates/nextjs/src/hooks/useBaseAssetId.tsx","lineNumber":10,"sourceCode":"import { useNamedQuery, useProvider } from \"@fuels/react\";\n\nexport const useBaseAssetId = () => {\n  const { provider } = useProvider();\n\n  return useNamedQuery(\"baseAssetId\", {\n    queryKey: [\"baseAssetId\"],\n    queryFn: async () => {\n      if (!provider) {\n        throw new Error(\"Provider not found\");\n      }\n\n      return await provider.getBaseAssetId();\n    },\n    placeholderData: undefined,\n  });\n};\n","sourceCodeStart":1,"sourceCodeEnd":18,"githubUrl":"https://github.com/FuelLabs/fuels-ts/blob/b3f37c91aca4aa9d5e4c0d3967f66237190826ea/templates/nextjs/src/hooks/useBaseAssetId.tsx#L1-L18","documentation":"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'.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Wrap the Next.js app (e.g. in _app.tsx or a root layout) with the Fuel provider.","Make components using this hook Client Components ('use client') and ensure they render only after the provider connects.","Gate the hook usage behind the provider's connection-ready flag.","Confirm @fuels/react's provider is an ancestor in the React tree."],"exampleFix":"// before\n// pages/_app.tsx\nexport default function App({ Component }) {\n  return <Component />; // useBaseAssetId has no provider\n}\n\n// after\nimport { FuelProvider } from '@fuels/react';\nexport default function App({ Component }) {\n  return <FuelProvider><Component /></FuelProvider>;\n}","handlingStrategy":"try-catch","validationCode":"import { useProvider } from '@fuels/react';\nconst { provider } = useProvider();\nif (!provider) throw new Error('Wrap the app with <FuelProvider> in _app/layout');","typeGuard":"const hasProvider = (ctx: ReturnType<typeof useProvider>): boolean =>\n  ctx.provider != null;","tryCatchPattern":"const q = useBaseAssetId();\nif (q.isError) return <FallbackUI reason=\"Provider not connected\" />;","preventionTips":["Wrap the Next.js app (root layout / _app) with the Fuel provider.","Mark hook consumers 'use client' and render them only after connection.","Keep the provider ancestor order correct when composing multiple context providers."],"tags":["react","nextjs","provider","context","usebaseassetid"],"backgroundTag":null,"analyzedSha":"b3f37c91aca4aa9d5e4c0d3967f66237190826ea","analyzedAt":"2026-08-12T20:30:56.448Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}