I am using office-ui-fabric
card in my spfx web part. Getting the error as below.
createComponent.tsx:51 Uncaught TypeError: external__react_.useContext is not a function
at result (createComponent.tsx:51)
at mountIndeterminateComponent (react-dom.development.js:14938)
at beginWork (react-dom.development.js:15443)
at performUnitOfWork (react-dom.development.js:18277)
at workLoop (react-dom.development.js:18317)
at HTMLUnknownElement.callCallback (react-dom.development.js:143)
at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
at invokeGuardedCallback (react-dom.development.js:250)
at replayUnitOfWork (react-dom.development.js:17564)
at renderRoot (react-dom.development.js:18436)
backend.js:6 The above error occurred in the <Stack> component:
in Stack (created by RealtimeData)
in div (created by RealtimeData)
in RealtimeData (created by Stock)
in div (created by Stock)
in div (created by Stock)
in Stock
Code:
return (
<div>
<Stack tokens={sectionStackTokens}>
<Card horizontal tokens={cardTokens}>
<Card.Item>
<Text>Basic horizontal card</Text>
</Card.Item>
</Card>
<Card horizontal onClick={alertClicked} tokens={cardTokens}>
<Card.Item fill>
<Image src="https://placehold.it/180x135" alt="Placeholder image." />
</Card.Item>
<Card.Section>
<Text variant="small" styles={siteTextStyles}>
Contoso
</Text>
<Text styles={descriptionTextStyles}>Contoso Denver expansion design marketing hero guidelines</Text>
<Text variant="small" styles={helpfulTextStyles}>
Is this recommendation helpful?
</Text>
</Card.Section>
<Card.Section styles={footerCardSectionStyles} tokens={footerCardSectionTokens}>
<Icon iconName="RedEye" styles={iconStyles} />
<Icon iconName="SingleBookmark" styles={iconStyles} />
<Stack.Item grow={1}>
<span />
</Stack.Item>
<Icon iconName="MoreVertical" styles={iconStyles} />
</Card.Section>
</Card>
</Stack>
</div>
);