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.

Toast fails in create-react-app typescript project with Cannot destructure property 'ref' of 'props' as it is null.

See original GitHub issue

useTransition.tsx:69 Uncaught TypeError: Cannot destructure property 'ref' of 'props' as it is null.
    at useTransition (useTransition.tsx:69)
    at Message (Message.js:45)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at discreteUpdates$1 (react-dom.development.js:21893)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)
useTransition @ useTransition.tsx:69
Message @ Message.js:45
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:1 The above error occurred in the <Message> component:
    in Message (created by ToastManager)
    in span (created by ToastManager)
    in ToastManager

Where it points to in message: const transition = useTransition(localShow, null, animation);

My code:

  const toast = useToast();
  return (
    <Button
      onClick={() =>
        toast({
          title: "Tournament Starts Now.",
          description: "[Tournament Name] begins now.",
          status: "success",
          duration: 9000,
          isClosable: true,
        })
      }
    >
      <Text>Tournament Start</Text>
    </Button>
  );
};

export const Main = (props: any) => {
  const { fullscreen } = props;
  const flexCenter = {
    justify: "center",
    align: "center",
  };
  return (
    <Box {...fullscreen} bg="brand.600">
      <Flex flexDirection="column" {...fullscreen} {...flexCenter}>
        <Text>TEST</Text>
        <ToastExample />
      </Flex>
    </Box>
  );
};```

Issue Analytics

State:
Created 3 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

3reactions

mighty6ft5maxcommented, Aug 24, 2020

I had to go v9 to get onChange/onFrame to work properly. Is there a way to get this working in v9?

2reactions

mkaradenizcommented, Jun 16, 2020

I had the same problem. I had react-spring 9 as a dependency, while chakra uses 8. Removing the dependency on 9 fixed it for me.

Top Results From Across the Web

Uncaught TypeError: Cannot destructure property 'recipes' of ...

I am a beginner in reactjs when I tried to run a program it showed the following error. Uncaught ...

typescript-cheatsheet - GitHub Pages

A set of TypeScript related notes used for quick reference. The cheatsheet contains references to types, classes, decorators, and many other TypeScript ......

How to create a custom toast component with React

An error message upon a failed API request; Chat information. In this tutorial, I'll demonstrate how to create a custom toast component with ......

react cannot read properties of null - You.com | The AI Search ...

In this case, using I get the error: TypeError: Cannot read properties of null (reading 'useContext') The code for this Layout component is...

“react TypeError [ERR_INVALID_ARG_TYPE]: The "path ...

Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node' ... argument must be of type string. received undefined typescript...