Individual import from 'flamelink/app' doesn't work: TypeError: flamelink is not a function

[ribalnasr]

importing from flamelink/app like this:

import * as flamelink from 'flamelink/app'; i get the following error:

ERROR TypeError: flamelink is not a function typescript doesn't show this issue in visual code but it appears in the browser's console.

to make it work i have to import everything: import * as flamelink from 'flamelink'; which will results with a warning recommending that i only import the individual modules am using (which makes sense).

[jperasmus]

This is strange because it definitely worked before. Wonder if the changes I made to the Types yesterday is causing this now.

What happens when you do import flamelink from 'flamelink/app'?

[ribalnasr]

nop, it's not because of changing the types. it was there since i started with alpha.8 or 9. but didn't tell you about it then because there we more important issues :D

when i import flamelink from 'flamelink/app' and serve (angular), i get

ERROR TypeError: flamelink is not a function which is caused by running the init function:

flamelink({
    firebaseApp: fireApp,
    env: 'production',
    locale: 'en-US',
    dbType: 'cf'
});

[ribalnasr]

sorry closed it by mistake!

[jperasmus]

Which version of Typescript are you using?

[ribalnasr]

3.2.4

[ribalnasr]

Checkout this package i made to work with angular projects:

https://www.npmjs.com/package/angular-flamelink

I'll share the source code on github soon. UPDATE: here's the source code: https://github.com/ribalnasr/angular-flamelink

[ribalnasr]

This is strange because it definitely worked before. Wonder if the changes I made to the Types yesterday is causing this now.

What happens when you do import flamelink from 'flamelink/app'?

I just noticed that u wrote import flamelink not import * as flamelink, let me recap my answers:

import flamelink from 'flamelink/app' : Module '"/Users/.../node_modules/flamelink/public"' has no default export

import * as flamelink from 'flamelink/app': ERROR TypeError: flamelink is not a function (in browser's console only when flamelink({...settings}) is called)

import * as flamelink from 'flamelink': Work fine but with 'not-recomended' the warning.

[jperasmus]

Can you please send me your tsconfig.json configuration?

[jperasmus]

Currently, I can reproduce the TypeScript flamelink is not a function error when using import flamelink from 'flamelink/app', but import * as flamelink from 'flamelink/app' seems to work fine.

[jperasmus]

This is what I've found that works:

If you want to use import flamelink from 'flamelink/app' you can use one of these 3 options:

• import flamelink = require('flamelink/app')
• Specify the --allowSyntheticDefaultImports flag as a CLI or config option
• Specify the --esModuleInterop flag as a CLI or config option

Alternatively, import * as flamelink from 'flamelink/app' seems to work fine with TypeScript v3.4.4 with the default options.

[ribalnasr]

None of the above options worked. The following made it work in my case:

import * as _flamelink from 'flamelink/app';
const flamelink = _flamelink['default'];

this is my tsconfig:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ],
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true,
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

It is automatically generated by angular and extends the below:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
}

[jperasmus]

I've checked out your angular-flamelink repo and when inspecting the type of _flamelink it shows it correctly as the flamelink factory function:

In your compilerOptions, I do not see either allowSyntheticDefaultImports or esModuleInterop.

[ribalnasr]

I didn't push the tsconfig changes since they didn't work.

Yes, flamelink shows as function in visual code whether imported from 'flamelink' or 'flamelink/app' however when it's from 'flamelink/app' if you console.log(flamelink) you get an object that has a method called 'default' which is the function we need, that's why the above example const flamelink = _flamelink['default']; worked.

Anyway, i'll upload an angular project later with angular-flamelink as a service in it and tell you how to reproduce this issue.

will keep you posted.

[jperasmus]

Okay, thank you, that will help a lot.

[jperasmus]

Hi @ribalnasr and others following this issue.

We've made changes to the SDK exports to match up with the type definitions. The individual app module uses a single default export which is the flamelink factory function.

You should be able to import it with import flamelink from 'flamelink/app' instead of import * as flamelink from 'flamelink/app' now. With the default import, you need to let TypeScript know to handle this by setting the esModuleInterop config flag in either your tsconfig.json file or as a CLI option.

I've created a PR against your angular-flamelink library with this change: https://github.com/ribalnasr/angular-flamelink/pull/2

[ribalnasr]

hey, thanks for the update, i merged your changes into master. :) i should find time soon to restructure and update this library. hopefully we can keep collaborating on it.

[ribalnasr]

@jperasmus @gitdubz please find on this link my latest update on the Flamelink module for Angular i've been working on the last couple of days.

It makes the installation process for angular much easier and provides services for each of the Content, User, Storage, Settings, Schemas, Navigation apis.

it also replaces the .subscribe() methods with .valueChanges() returning an observable.

there is still a lot of room for improvements, and your collaboration on this is most welcome :)

https://github.com/ribalnasr/ng-flamelink

[jperasmus]

Wow! This is great, Ribal! I'm sure other people will find it very useful as well. There was someone yesterday that asked about a better way to use Flamelink with Angular, so I'll point them to this new library.