Firebase is not defined?
Solution 1
Had the same issue.. awful experience..
Eventually, found this: https://firebase.google.com/support/guides/firebase-web
Solution 2
As others have mentioned, you're getting the latest version of Firebase (3 and up) which doesn't work with the Firebase constructor docs here. You're getting it because in your package.json
you added firebase: "*"
You should initialize as others suggested and before any work with firebase is done. This could be someplace global, or in some config block (angular's). After initialization you can get a database reference using
var rootRef = firebase.database().ref();
With the new Firebase version, you need to use a compatible AngularFire version, so you'll need it to be above 2 (confusing versioning, I know), which you can find documentation for in their GitHub page.
Didn't see AngularFire at all in your package.json
nor in your bower.json
but if you're working with Firebase 3.x.x then you'll need AngularFire 2.x.x
Solution 3
"firebase": "*"
in your package.json
will install the latest firebase ^3.1.0
which is not compatible with firebase 2.4.2
.
The new documentation is in here
To include and configure firebase in your index.html:
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "your apiKey from firebase website",
authDomain: "projectId.firebaseapp.com",
databaseURL: "https://databaseName.firebaseio.com",
storageBucket: "bucket.appspot.com",
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref();
</script>
You can auto-generate the config above in https://console.firebase.google.com/ by creating a new project.
sanja
Updated on February 15, 2021Comments
-
sanja over 3 years
I'm working on an Angular project and use Firebase, and it's erroring with
ReferenceError: Firebase is not defined
, but I can not figure out why.this is my index.html
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>My Contacts App</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bower_components/foundation/css/foundation.css"> <link rel="stylesheet" href="app.css"> </head> <body> <div class="container"> <div class="row"> <div class="large-12 columns"> <h1>myContacts</h1> <hr> </div> </div> <div ng-view></div> </div> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/firebase/firebase.js"></script> <script src="bower_components/angularfire/dist/angularfire.js"></script> <script src="bower_components/foundation/js/foundation.js"></script> <script src="app.js"></script> <script src="contacts/contacts.js"></script> </body> </html>
my contact.js
'use strict'; angular.module('myContacts.contacts', ['ngRoute', 'firebase']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/contacts', { templateUrl: 'contacts/contacts.html', controller: 'ContactsCtrl' }); }]) .controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) { var ref = new Firebase('https://<my_project_name>.firebaseio.com/contacts'); $scope.contacts = $firebaseArray(ref); console.log($scope.contacts); }]);
my app.js
'use strict'; angular.module('myContacts', [ 'ngRoute', 'firebase', 'myContacts.contacts' ]). config(['$routeProvider', function($routeProvider) { $routeProvider.otherwise({redirectTo: '/contacts'}); }]);
and my package.json
{ "name": "angular-seed", "private": true, "version": "0.0.0", "description": "A starter project for AngularJS", "repository": "https://github.com/angular/angular-seed", "license": "MIT", "devDependencies": { "bower": "^1.7.7", "http-server": "^0.9.0", "jasmine-core": "^2.4.1", "karma": "^0.13.22", "karma-chrome-launcher": "^0.2.3", "karma-firefox-launcher": "^0.1.7", "karma-jasmine": "^0.3.8", "karma-junit-reporter": "^0.4.1", "protractor": "^3.2.2", "shelljs": "^0.6.0", "firebase": "*" }, "scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server -a localhost -p 8000 -c-1 ./app", "pretest": "npm install", "test": "karma start karma.conf.js", "test-single-run": "karma start karma.conf.js --single-run", "preupdate-webdriver": "npm install", "update-webdriver": "webdriver-manager update", "preprotractor": "npm run update-webdriver", "protractor": "protractor e2e-tests/protractor.conf.js", "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + sed(/sourceMappingURL=angular-loader.min.js.map/,'sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map','app/bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\"" } }
In package.json file I firebase assigned "*", I do not know if it can do it? Everything else looks good...
this is bower.json file
{ "name": "angular-seed", "description": "A starter project for AngularJS", "version": "0.0.0", "homepage": "https://github.com/angular/angular-seed", "license": "MIT", "private": true, "dependencies": { "angular": "~1.5.0", "angular-route": "~1.5.0", "angular-loader": "~1.5.0", "angular-mocks": "~1.5.0", "html5-boilerplate": "^5.3.0" } }
whether there might have to give Firebase?
-
guy mograbi almost 8 yearsand then what? How do you get to
new Firebase()
? it is still undefined -
idan almost 8 yearsAnd then you don't need
new Firebase()
. You can get a reference withfirebase.database().ref()
-
Admin almost 7 yearsI have this particular issue and am using the method outlined here, but with the same error, so it appears there may be an alternative underlying cause.