TSC: Cannot find module 'geofire'

[maxmumford]

Hi all,

After installing geofire-js with npm and trying to import it in my angular2 (RC5) project, I get the following tsc transpile error:

import { GeoFire } from "geofire";

However I can see the module is installed properly, GeoFire is exported properly by the module and I've mapped it in my systemjs configuration file.

All I can think is that there is something wrong with the package.json file causing typescript not to find it? I may be totally on the wrong track but I'm quite new to typescript etc. I'd appreciate any advice as I'm at a loss with this one.

Thanks Max.

[puf]

You seem to have also posted about this problem on http://stackoverflow.com/questions/39054386/using-geofire-in-an-angular2-app

[maxmumford]

I have yes, I realised after posting here that it probably wasn't the correct place. Feel free to delete this thread if you think SO is more appropriate

[puf]

To be honest, I have no idea which place is more appropriate for this problem. But please indicate when you cross-post so that people can easily check whether you've been helped elsewhere already.

[maxmumford]

Will do, thanks for the heads up.

[maxmumford]

Artem @ stackoverflow helped me solve this one in the end, it was due to a missing typings definition file. The geofire team has already said providing an official typings file is out of their scope so this wasn't the right place to post this in the end.

In any case, for other people looking in the future, the full (and very comprehensive) solution can be found here:

http://stackoverflow.com/questions/39054386/using-geofire-in-an-angular2-app

And to summarise the solution for this thread:

The systemjs.config.js file's "package" entry for geofire should be marked as global like so:

'geofire': {
    main: 'dist/geofire.js', 
    defaultExtension: 'js', 
    meta: {'dist/geofire.js': {format: 'global'}} 
 },

Next, create a file called geofire.d.ts in the app folder with the following contents:

declare module 'geofire' {
    export function GeoFire(firebaseRef: any): any;
}

Then import geofire in your .ts files like so:

import * as GeoFire from "geofire";

This works because systemjs and typescript are configured independently of one another. SystemJS knew about GeoFire thanks to it's entry in the config file, but TypeScript didn't know about the module because it was missing a typescript definition file.

If tsc logs this error when transpiling:

Cannot use 'new' with an expression whose type lacks a call or construct signature

The workaround is to bypass type checking like this:

var X: any = GeoFire; var geofire = new X(...);

There are two more approaches to solving this problem in the StackOverflow question linked above.

Credit goes to Artem for solving this :)

[sidferreira]

Followed @maxmumford 's steps and it didn't worked.

{
  "name": "my-app1",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "angularfire2": "^2.0.0-beta.7",
    "core-js": "^2.4.1",
    "firebase": "^3.6.9",
    "geofire": "^4.1.2",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.31",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.0"
  }
}

[jwngr]

See https://github.com/firebase/geofire-js/issues/123.

[ravivit9]

Hi, I tried in all 3 different methods, I am unable to load the geofire. I am getting the following error.

*Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using 'import as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.**

In one of the other method, getting the following:

Module ''geofire'' resolves to a non-module entity and cannot be imported using this construct.

I am using the following: Angular 4.0.2 "firebase": "^3.8.0", "geofire": "^4.1.2", "systemjs": "^0.20.12", "typescript": "^2.2.2",