Back to all discussions

  •   over 4 years ago

Getting Errors when I run classroom sample

Hello,

I am getting errors when I try to run the classroom sample. I followed the directions fully and then tried to run the project. At first I was getting an error whereby the "PORT" argument was not recognized and crashed the program. Dan helped me through that by having me remove the PORT=3003 argument from the scripts block in package.json. Now the demo runs but nothing shows in the browser. I opened up Chrome DevTools and saw this list of errors:

Firebase.js:40 Uncaught TypeError: Object(...) is not a function
at Module. (Firebase.js:40)
at Module../src/providers/Firebase.js (Firebase.js:47)
at __webpack_require__ (bootstrap:856)
at fn (bootstrap:150)
at Module. (constants.js:33)
at Module../src/utils/firebaseUtils.js (firebaseUtils.js:76)
at __webpack_require__ (bootstrap:856)
at fn (bootstrap:150)
at Module. (firebaseUtils.js:76)
at Module../src/utils/voxeetUtils.js (voxeetUtils.js:171)
at __webpack_require__ (bootstrap:856)
at fn (bootstrap:150)
at Module. (TeacherView.scss:7)
at Module../src/App.js (App.js:334)
at __webpack_require__ (bootstrap:856)
at fn (bootstrap:150)
at Module. (VideoOnOffIcon.js:7)
at Module../src/index.js (index.js:21)
at __webpack_require__ (bootstrap:856)
at fn (bootstrap:150)
at Object.1 (TeacherView.scss?9d80:82)
at __webpack_require__ (bootstrap:856)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
(anonymous) @ Firebase.js:40
./src/providers/Firebase.js @ Firebase.js:47
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ constants.js:33
./src/utils/firebaseUtils.js @ firebaseUtils.js:76
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ firebaseUtils.js:76
./src/utils/voxeetUtils.js @ voxeetUtils.js:171
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ TeacherView.scss:7
./src/App.js @ App.js:334
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ VideoOnOffIcon.js:7
./src/index.js @ index.js:21
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ TeacherView.scss?9d80:82
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 ./src/providers/Firebase.js
Attempted import error: 'getAnalytics' is not exported from 'firebase/analytics'.
console. @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 ./src/providers/Firebase.js
Attempted import error: 'initializeApp' is not exported from 'firebase/app'.
console. @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 src\providers\Firebase.js
Line 43:1: 'firebase' is not defined no-undef
Line 44:12: 'firebase' is not defined no-undef

What can I do to fix these errors?

  • 4 comments

  • Manager   •   over 4 years ago

    Thank Robert, posting your questions here means other with similar blockers can benefit from the problem solving steps and solution as well.
    Regarding the setup for the Classroom app.

    Based on the issue you've reported, it appears you still need to edit the source code to add you dolby.io credentials AND the firebase config.
    The app will launch a web page, but will not work if you failed to follow the complete full instructions for setting up - this may take you as much as hour, as there's significant setup on the Firebase side. You have to do a lot of setup before you hit, npm run start.

    Review the steps on the project's readme:
    https://github.com/dolbyio-samples/meet-dolbyio-classroom

    As I mentioned, this sample code you are attempting to use one of our more advanced demos, many additional dependencies that must be configured.
    The intended target audience for this specific code example is developers with some experience with both react and firebase. Our generic meeting app is little more approachable: https://github.com/dolbyio-samples/meet-dolbyio-generic

  • Private user

    Private user   •   over 4 years ago

    To create a simple video meeting app, I am deploying it in netlify but it's asking for sign in and I am not sure of what exactly to fill in the username and password field. Can you please help me with this!

  •   •   over 4 years ago

    Hi Dan,

    I did perform all the steps. The problem occurred during step 4 in the classroom readme file on GitHub:

    "4. Copy the details provided in firebaseConfig on this screen and paste them into the src/providers/Firebase.js file."

    I copied the details. But in reality you should only copy the firebaseConfig object content provided by the Firebase console. The problem arose because the other scaffolding lines provided by the Firebase console that involve the imports and call to initializeApp() are not correct for classroom sample. I have included the text below in case it helps someone else:

    // ========= WRONG: Copied entire contents from Firebase console into Firebase.js

    // Import the functions you need from the SDKs you need
    // >>>>> This line caused a problem.
    import { initializeApp } from "firebase/app";

    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    const firebaseConfig = {

    };

    // Initialize Firebase
    // >>>>> This line too.
    const app = initializeApp(firebaseConfig);

    // ========= RIGHT: Replaced just the contents of the firebaseConfig object in the existing code found in Firebase.js

    // >>>>> Correct import lines that exist in Firebase.js
    import firebase from 'firebase/app';
    import 'firebase/database';

    // Your web app's Firebase configuration
    const firebaseConfig = {

    };

    // >>>>> Correct dotted function call as found in Firebase.js.
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();

    export { db };

  • Manager   •   over 4 years ago

    Thanks Robert, If you go back and re-read the readme, it's precise; copy and replace the firebaseConfig only. Furthermore, if you select firebase config in the google console, it shows just the config object we are referencing and not the initialization code example. We appreciate your feedback.

Comments are closed.