React jsx Error Must be used within the ConnectProvider Component

Question

Ive been following the tutorial with no issues. On step 3 ill have to add the PublicUrlRegistrar tag.

Ill get this Error:

Error: This must be used within the ConnectProvider component.

  22 | const useConnectDispatch = () => {
  23 |   const dispatch = useContext(ConnectDispatchContext);
  24 |   if (!dispatch) {
> 25 |     throw new Error('This must be used within the ConnectProvider component.');
  26 |   }
  27 |   return dispatch;
  28 | };

PublicUrlRegistrar.jsx Component

import React from "react";
import { Text } from "@blockstack/ui";
import { useConnect } from "@stacks/connect-react";
import { bufferCVFromString } from "@stacks/transactions";
import { CONTRACT_ADDRESS, CONTRACT_NAME } from "../assets/constants";

export const PublicUrlRegistrar = ({ userSession }) => {
  const { doContractCall  } = useConnect();  // <<<<<-------------------throwing error--------
  const { username } = userSession.loadUserData();
  const url = `${document.location.origin}/todos/${username}`;

  const register = () => {

    // do the contract call
    doContractCall({
      contractAddress: CONTRACT_ADDRESS,
      contractName: CONTRACT_NAME,
      functionName: "register",
      functionArgs: [bufferCVFromString(username), bufferCVFromString(url)],
      onFinish: (data) => {
        console.log({ data });
      },
    });
  };
  return (
    <>
      <Text
        color="blue"
        cursor="pointer"
        fontSize={1}
        fontWeight="500"
        onClick={() => {
          // register the public URL
          register();
        }}
      >
        Register on-chain
      </Text>
    </>
  );
};

It seems useConnect() must be used in the ConnectProvider Component.

Even if I comment out the PublicUrlRegistrar.jsx functions and only leave line 8 ill get the same error.

Im trying to figure out how to use this library correctly

import { useConnect } from "@stacks/connect-react";

I've tried many things and been working on this for a while now with no way to progress. Any insights into this would be very helpful! Thank you!

Error seems pretty clear, the `useConnect` hook needs to be used within a component rendered within a `ConnectProvider`. Where are you rendering the `ConnectProvider`? — Drew Reese, Feb 10 '22 at 00:07
There is no mention of a ConnectProvider anywhere, not in docs, its declared in the library @stacks/connect-react but not exported. useConnect is being used exactly as the tutorial describes. — Anthony Raimondo, Feb 10 '22 at 01:46
There's no documentation quite like [source](https://github.com/hirosystems/connect/tree/main/packages/connect-react). Are you importing and using the `Connect` component from `@stacks/connect-react`? — Drew Reese, Feb 10 '22 at 02:17
Found the issue https://github.com/stacks-network/docs/issues/1046 it turns out the tutorial is 2 years old and has not been updated — Anthony Raimondo, Feb 11 '22 at 17:35
Hmmm. seems that person also just looked in the source code and found this `Connect` component. Did you try using it and wrapping that subtree of your app to see if it resolves the error? — Drew Reese, Feb 11 '22 at 17:39

Anthony Raimondo · Answer 1 · 2022-02-11T18:52:26.393

This solved the issue, wrap PublicUrlRegistrar in Connect Component.

  //Sharer.jsx

  import { Connect } from "@stacks/connect-react";

  ...
 
  const authOption = {
    appDetails: {
      name: 'Todos',
      icon: window.location.origin + '/logo.svg',
    },
    redirectTo: '/',
    userSession: userSession,
  }

  ...
    
  <Connect authOptions={authOption} >
     <PublicUrlRegistrar userSession={userSession} />
  </Connect>

React jsx Error Must be used within the ConnectProvider Component

1 Answers1