Encountering 'Error: useVoiceFocus must be used within VoiceFocusProvider' after following Chime with Amplify demo.

[justro]

What happened and what did you expect to happen?

I followed the steps in the Chime with Amplify demo here: https://aws.amazon.com/blogs/business-productivity/quickly-launch-an-amazon-chime-sdk-application-with-aws-amplify/ I did not modify the code from what is listed in that demo. When I attempt to load the app, I get the following error:

Error: useVoiceFocus must be used within VoiceFocusProvider
useVoiceFocus
src/providers/VoiceFocusProvider/index.tsx:184

  181 | const context = useContext(VoiceFocusContext);
  182 | 
  183 | if (!context) {
> 184 |   throw new Error(
      | ^  185 |     'useVoiceFocus must be used within VoiceFocusProvider'
  186 |   );
  187 | }

AudioInputProvider
src/providers/DevicesProvider/AudioInputProvider.tsx:41

  38 | const [selectAudioInputDeviceError, setSelectAudioInputDeviceError] = useState(
  39 |   meetingManager.selectAudioInputDeviceError
  40 | );
> 41 | const { addVoiceFocus } = useVoiceFocus();
     | ^  42 | 
  43 | useEffect(() => {
  44 |   meetingManager.subscribeToSelectAudioInputDeviceError(setSelectAudioInputDeviceError);

./src/index.tsx/</<
src/index.tsx:15

  12 | Amplify.configure(awsconfig);
  13 | 
  14 | window.addEventListener('load', () => {
> 15 |   ReactDOM.render(
  16 |   <ThemeProvider theme={lightTheme}>
  17 |     <MeetingProvider>
  18 |       <MeetingForm />

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

I am not using useVoiceFocus or the VoiceFocusProvider. It's not clear to me if this is an issue with the react component or the chime/amplify demo. I am running on Ubuntu 20.04, and encounter the error using either Firefox or Chrome. If I wrap the MeetingProvider in a VoiceFocusProvider, the error resolves. This is fine by me, but the storybook documentation for the MeetingProvider component doesn't seem to indicate that should be necessary.

.

Have you reviewed our existing documentation?

• Amazon Chime SDK for JavaScript GitHub issues
• Amazon Chime SDK React Components Library GitHub issues
• Storybook documentation
• README page
• How-to documentation
• React SDK meeting demo

Reproduction steps

Follow the steps here: https://aws.amazon.com/blogs/business-productivity/quickly-launch-an-amazon-chime-sdk-application-with-aws-amplify, and attempt to open the application.

Amazon Chime SDK React Components Library version

"amazon-chime-sdk-component-library-react": { "version": "2.10.0",

What browsers are you seeing the problem on?

Firefox, Chrome

Browser version

92.0 (64-bit)

Device Information

Ubuntu 20.04.3 LTS

Meeting and Attendee ID Information.

No response

Browser console logs

Add any other context about the problem here.

No response

[richnew10]

An incorrect breaking change was shipped in 2.10.0. Please explicitly roll back to the previous version while we address the issue. Thanks for filing a thorough bug report!

[michhyun1]

@justro We've just released a patch fix for this issue - please upgrade to 2.10.1 or you can use the previous versions as well. Thanks for filing this report.