Cannot find namespace 'StateContext'

Question

I was following this tutorial: https://www.youtube.com/watch?v=BDCT6TYLYdI&t=7217s

I am doing sort of 'my version' of this project by implementing different functionality, but with same tools...

But, I use typescript instead of JavaScript and I ran into some problem with createContext in react.

In VS Code I get this error message:

Cannot find namespace 'StateContext'.

When trying this with normal plain JavaScript everything worked perfectly.

import React, { useContext, createContext } from "react";
import {
  useAddress,
  useContract,
  useMetamask,
  useContractWrite,
  SmartContract,
} from "@thirdweb-dev/react";
import { BaseContract, ethers } from "ethers";
import { EditionMetadataWithOwnerOutputSchema } from "@thirdweb-dev/sdk";

import { ProfileFormState } from "../pages/onboarding/widgets/OnboardingCreateNewProfileFormWidget";

type Profile = {
  owner: string;
  email: string;
  firstName: string;
  lastName: string;
  profileDescription: string;
  profilePic: string; // url
  bannerPic: string; // url
};

type Bean = {
  supporter: string;
  timestamp: Date;
  amount: number;
};

type StateContextType = {
  address: string | null;
  contract: SmartContract<BaseContract> | undefined;
  connect: () => void;
  createNewProfile: (form: {
    email: string;
    firstName: string;
    lastName: string;
    profileDescription: string;
    profilePic: string;
    bannerPic: string;
  }) => Promise<void>;
};

const StateContext = React.createContext<StateContextType>({
  address: null,
  contract: undefined,
  connect: () => {},
  createNewProfile: () => Promise.resolve(),
});

// todo why not implement with type?
interface StateContextProviderProps {
  children: React.ReactNode;
}

export const StateContextProvider = ({
  children,
}: StateContextProviderProps) => {
  // copied address from thirdweb dashboard
  const { contract } = useContract(
    "[WALLET_ADDRESS_STRING]"
  );
  const { mutateAsync: createNewProfile } = useContractWrite(
    contract,
    "createNewProfile"
  );

  const address = useAddress(); // somehow check that this method does not return undefined
  const connect = useMetamask();

  const createNewProfileRequest = async (formData: ProfileFormState) => {
    try {
      // todo what to do with the data now???
      const data = await createNewProfile({
        args: [
          address,
          formData.email,
          formData.firstName,
          formData.lastName,
          formData.profileDescription,
          formData.profilePic,
          formData.bannerPic,
        ],
      });

      console.log("Success from [createNewProfileRequest]");
    } catch (error) {
      console.error("Error from [createNewProfileRequest]", error);
    }
  };

  return <StateContext.Provider />;
};

export const useStateContext = () => useContext(StateContext);

Answer 1

Since you're using JSX in a TypeScript file, the extension should be .tsx instead of .ts.