Recoil: Cannot destructure property 'error' of 'undefined' as it is undefined.

[iDavidB]

Hi,

I ran into an issue where I get the following error "Cannot destructure property 'error' of 'undefined' as it is undefined.". Far as I could tell this seems to be a bug rather than a mistake on my end, but feel free to correct me.

I was able to reproduce it in CodeSandbox

[acutmore]

Hi @iDavidB

The codesandbox link might have changed as it's now showing a different error.

The error it is showing at the moment is caused by using an async selector without providing a <Suspence fallback={"Loading"}> wrapper.

https://reactjs.org/docs/concurrent-mode-suspense.html

[iDavidB]

Hi @acutmore,

I was hoping to see the Suspense error as it should have, strangely it gave me it now too after coming back to it. But after adding the suspense component it will go back to the previous error: CodeSandbox

EDIT: I noticed when coming from a redirect it will show the Suspense error. Please try to fix the suspense error / refresh the codesandbox internal browser. It should give you the error eventually.

[acutmore]

Hi @iDavidB

I could get that link to work by changing a few little things:

const ApiData = selector({
  key: "apiData",
  get: async () => {
    const res = await fetch("https://catfact.ninja/fact") // add 'https://'  
      .then(response => response.json())
      .catch(e => {
        console.log(e);
      });

    return res;
  }
});

export default function App() {
  const value = useRecoilValue(ApiData);
  // convert value to a string before using in the DOM
  return <div className="App">{JSON.stringify(value)}</div>; 
}

[DynamicArray]

@iDavidB This worked for me:

https://codesandbox.io/s/admiring-leaf-fbje3

[iDavidB]

Thanks both @DynamicArray @acutmore. Strangely however when forking @DynamicArray solution it gives me the error again. But i'm guessing it has to do with fetch rather than Recoil then.

[jonthomp]

There's a PR to resolve this working its way through the approval process here https://github.com/facebookexperimental/Recoil/pull/199

[iDavidB]

Ah. Thanks @jonthomp! Closed.

[MrKirat]

Hi, I'm not using recoil selectors but I faced the same error Cannot destructure property 'error' of 'undefined' as it is undefined. As I can see these changes are not released yet.
@jonthomp Could you please help me with how I can use the master branch of the recoil package in my react app?

[MrKirat]

@jonthomp I tried to specify "recoil": "facebookexperimental/recoil#master" in my package.json, but after running the npm install command the distfolder is absent in the node_modules/recoildirectory.

[MrKirat]

@jonthomp ohh... I found that I forgot to add unique keys for my recoil atoms :) sorry, it was my fault, now everything works fine on 0.0.8 version.

[Umarkhan05]

Had same error
Before code:
app.use('/user', userRouter);
app.use(bodyParser.json());

Problem solved by writing bodyparser above middleware route.
app.use(bodyParser.json());
app.use('/user', userRouter);