This component must be used inside a <RecoilRoot> component

⚙️ Flow SDKs Flow JavaScript SDK
#1

Hi,

I followed the Quick start tutorial (https://docs.onflow.org/flow-js-sdk/flow-app-quickstart). I end up getting an error: This component must be used inside a component. (see image below).

image

It seems that the problem is somewhere in the current-user.js file at this code block:
export function useCurrentUser() {
const currentUser = useRecoilValue($currentUser)

return {
…currentUser,
logOut: fcl.unauthenticate,
logIn: fcl.logIn,
signUp: fcl.signUp,
}
}

Is anyone able to help?

#2

Hey! Hi!

Did you check that in src/index.js the App component is wrapped by <RecoilRoot> ?

The whole file should look like this:

`// File: ./src/index.js

import "./config"
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import {RecoilRoot} from "recoil"

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
     <App />
   </RecoilRoot>
</React.StrictMode>,
document.getElementById("root")
)

reportWebVitals()`