CODEWITHSUNDEEP
typescriptfirebasevisual-studio-code
Ben Chaimowicz
Ben Chaimowicz

Reputation: 41

Cannot find name 'firebase' vanilla typescript

I've searched everywhere and cannot find a solution to this problem: 

var config = {
    apiKey: "xxxxxxxx",
    authDomain: "xxxxxxxxx",
    databaseURL: "xxxxxxxxx",
    projectId: "xxxxxxx",
    storageBucket: "xxxxxxxxxx",
    messagingSenderId: "xxxxxxxx"
};
firebase.initializeApp(config);

I am not using Angular nor node.js, just vanilla typescript in vscode, and no matter what I do, 'firebase' is always red lined, and name cannot be found. I followed the documentations and some youtube tutorials step by step several times and I'm just desperate right now. deploying works, no probs there...

I have also used this link in my html:

<script src="https://www.gstatic.com/firebasejs/5.5.5/firebase.js"></script>

And moving the given snippets between files doesn't help. what am I doing wrong?

I have found something odd. In chrome console, I am able to find 'firebase', it exists and imported from CDN, But it is not the same in VSCode as it still won't let me compile due to the missing name error.

Could it be related to my tsconfig?

Edit #2: I contacted firebase support and we are looking for a solution, I have to note that they have wonderful tech support, kudos. My theory now is that my VSCode .ts files are unable to import variables from files that are not .ts. Is this normal?

Upvotes: 4

Views: 1714

Answers (3)

Partik
Partik

Reputation: 836

TL;DR Just download this file and throw it somewhere in your project folder.

Simple solution, but be warned, doing this means Typescript will always assume your script has access to the variable firebase, even when it actually doesn't.

As @Matt Bierner said, you're importing firebase with script tags in the HTML. So Typescript doesn't know that firebase was imported. So it doesn't know anything about "firebase", and therefore it red lines it.

His solution including installing the firebase package from npm and importing it, and also webpacking it, since node_modules (the folder with all your npm packages) isn't something your front end code usually has access to.

Why would bundling the npm firebase package fix the problem? Because for one thing, inside the package there's a file called index.d.ts, and THAT tells Typescript everything it needs to know about the firebase object.

So instead of webpacking and stuff, you can skip all that, and simply copy just that file into your project folder. VSCode will find it, and it won't complain about 'firebase' anymore.

Here's the link to the file: https://github.com/firebase/firebase-js-sdk/blob/master/packages/firebase/index.d.ts

WARNING: You may have some pages in your app that don't have access to firebase. If you use firebase on those pages, Typescript will not throw an error even though it should, so your Javascript will throw an error, likely 'firebase' is not defined.

Just remember to include the firebase HTML snippets on whatever page you need firebase for.

For me, I generally make single page apps where firebase is global anyway, so this is a great quick fix.

Upvotes: 0

Matt Bierner
Matt Bierner

Reputation: 65303

TypeScript does not know that you are importing firebase because the import happens in an html file. Although it may be clear to you that your ts file will be used in that same html file, TypeScript cannot determine this and it also cannot assume that that your ts file will only be used on html pages that have firebase already included.

The best solution is to take firebase as a real dependency using npm 

npm install --save firebase

and then import it in your ts file:

import * as firebase from 'firebase';

var config = {
    ...
};
firebase.initializeApp(config);

Then use webpack or a similar tool to compile that TypeScript to a single js file

If you do not want to add a real import, then you can reference just the global types from firebase using:

declare const firebase: typeof import('firebase');

var config = {
    ...
};
firebase.initializeApp(config);

This also requires that you install firebase locally using npm.

Upvotes: 4

Phix
Phix

Reputation: 9890

I wonder if there's another way (using tsconfig), but adding the following line to the top of your entry file resolves the issue:

/// <reference path="node_modules/firebase/index.d.ts" />

Upvotes: 0

Related Questions