Hey there, let's troubleshoot this frustrating error you're hitting when joining a conference with the Dolby (Voxeet) React SDK. That Cannot read property 'has' of undefined error typically pops up when the SDK tries to access a piece of state that hasn't been properly initialized—let's walk through the most likely fixes.

First: Fix the Store Initialization #

Looking at your App.js code, you're creating a new Redux store inside the App component's render function (via configureStore() in the VoxeetProvider props). This means every time your component re-renders, a brand new store is created, which wipes out the SDK's internal state and leads to undefined values when it tries to access state properties like has.

Move the store creation outside of your component so it only initializes once:

import { reducer as voxeetReducer } from "@voxeet/react-components"
import React from "react"
import thunkMiddleware from "redux-thunk" // Fixed the typo here!
import { combineReducers, createStore, applyMiddleware } from "redux"
import { ConferenceRoom, VoxeetProvider } from "@voxeet/react-components"
import "@voxeet/react-components/dist/voxeet-react-components.css"

const reducers = combineReducers({
  voxeet: voxeetReducer,
})

const configureStore = () => createStore(
  reducers,
  applyMiddleware(thunkMiddleware)
)

// Initialize store ONCE outside the component
const store = configureStore();

const settings = {
  consumerKey: "xxxxxxxxxxxxx",
  consumerSecret: "xxxxxxxxxxxxx",
  conferenceAlias: "Sample",
}

function App() {
  return (
    <VoxeetProvider store={store}>
      <ConferenceRoom
        autoJoin
        consumerKey={settings.consumerKey}
        consumerSecret={settings.consumerSecret}
        conferenceAlias={settings.conferenceAlias}
      />
    </VoxeetProvider>
  )
}

export default App

(Note: I also fixed the typo in thunkMiddleware—you had thunkMidleware with one 'd' earlier. While this might not have broken the import, it's good practice to use the correct naming to avoid confusion.)

Second: Avoid Premature autoJoin #

The autoJoin prop might be trying to join the conference before the SDK has finished initializing with your credentials. Instead of relying on autoJoin, try manually triggering the join after confirming the SDK is ready:

import { reducer as voxeetReducer } from "@voxeet/react-components"
import React, { useState, useEffect } from "react"
import thunkMiddleware from "redux-thunk"
import { combineReducers, createStore, applyMiddleware } from "redux"
import { ConferenceRoom, VoxeetProvider, useVoxeet } from "@voxeet/react-components"
import "@voxeet/react-components/dist/voxeet-react-components.css"

const reducers = combineReducers({
  voxeet: voxeetReducer,
})

const configureStore = () => createStore(
  reducers,
  applyMiddleware(thunkMiddleware)
)

const store = configureStore();

const settings = {
  consumerKey: "xxxxxxxxxxxxx",
  consumerSecret: "xxxxxxxxxxxxx",
  conferenceAlias: "Sample",
}

function App() {
  const { join, isInitialized } = useVoxeet();
  const [readyToJoin, setReadyToJoin] = useState(false);

  useEffect(() => {
    // Wait for SDK to initialize before enabling join
    if (isInitialized) {
      setReadyToJoin(true);
    }
  }, [isInitialized]);

  return (
    <VoxeetProvider store={store}>
      <div>
        {readyToJoin ? (
          <>
            <button onClick={() => join(settings.conferenceAlias)}>Join Conference</button>
            <ConferenceRoom />
          </>
        ) : (
          <p>Initializing Dolby SDK...</p>
        )}
      </div>
    </VoxeetProvider>
  )
}

export default App

This gives you more control over when the join action is triggered, ensuring the SDK has all the state it needs before attempting to connect to the conference.

Third: Verify SDK Version Compatibility #

Double-check that your version of @voxeet/react-components is compatible with your React and Redux versions. For example, if you're using React 18, make sure you're on a recent SDK version that supports it—older versions might have issues with React 18's concurrent rendering, leading to unexpected state undefined errors.

Try updating the SDK to the latest version:

npm update @voxeet/react-components

Final Checks #

• Make sure your consumerKey and consumerSecret are valid and not expired. Invalid credentials can lead to failed initialization, which leaves the SDK in an undefined state.
• Check your browser's network tab to confirm the SDK is successfully fetching tokens and connecting to Dolby's servers—any failed network requests here could cause state issues.

Give these fixes a try, and let me know if you still run into issues!

内容的提问来源于stack exchange，提问作者Surya Mahla