Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"This component must be used inside a <RecoilRoot> component" when importing from "recoil."

See original GitHub issue

I got the recoil root error with,

import React from 'react';
import { RecoilRoot } from 'recoil'
import Header from 'components/Header';
import Body from 'componentsBody';

const App = () => {
    return (
        <RecoilRoot>
            <Header />
            <Body />
        </RecoilRoot>
}

modifying to

import { RecoilRoot } from 'recoil/dist/recoil.production'

appears to resolve it.

Issue Analytics

State:
Created 3 years ago
Reactions:7
Comments:9 (3 by maintainers)

Top GitHub Comments

6reactions

Justin9606commented, Feb 24, 2022

Screen Shot 2022-02-24 at 1 43 23 PM

I solved by import inside the index.js and wrapping the App (comontent) with RecoilRoot instead of import it into the App.js

2reactions

DeusFerrariiscommented, Jun 11, 2020

Issue also isn’t experienced with 0.0.7

Top Results From Across the Web

ReactJS error is "This component must be used inside a ...

Components that use recoil state need RecoilRoot to appear somewhere in the parent tree. A good place to put this is in your...

This component must be used inside a <RecoilRoot ...

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 ...

<RecoilRoot> | Recoil

<RecoilRoot>. Provides the context in which atoms have values. Must be an ancestor of any component that uses any Recoil hooks.

How to Use Recoil for State Management in Your React Projects

You can simply do this by importing and adding RecoilRoot in your index.js ... Now let's create a component to display a todo...

Unable to use "useSetRecoilState" in story #17082 - Issuehunt

export const DateInputField = ({recoilStateName}) => { const isDisabled ... from Storybook is "This component must be used inside a <RecoilRoot> component.