Cannot invoke an expression whose type lacks a call signature. Type 'typeof ""' has no compatible call signatures React TypeScript

Question

I'm trying to convert three scripts from Javascript to TypeScript. The scripts can be found in this gist. I do however have one error left that I can't get rid of. Please note that this is my first React and TypeScript project so I can easily have missed something obvious. I'm using .tsx files and TypeScript 2.1.

In the file: GoogleApiComponent.tsx

import * as cache from './ScriptCache'
...
componentWillMount() {
    this.scriptCache = cache({ <--Error TS2349 here
        google: GoogleApi({
            apiKey: apiKey,
            libraries: libraries
        })
    });
}

Gives me this error:

Cannot invoke an expression whose type lacks a call signature. Type 'typeof "ScriptCache"' has no compatible call signatures.

ScriptCache.tsx looks like this:

let counter = 0;
let scriptMap = new Map();

export const ScriptCache = (function (global: any) {
    return function ScriptCache(scripts: any) {
        const Cache: any = {}
        ...

Answer 1

Looks like you're import is not correct :)

Please try to import it like this import cache from './ScriptCache'. If you just used the code from the gist the cache is also exported as default.

If this does not work, try import { ScriptCache as cache } from './ScriptCache'. You do not need the as syntax. This is just so you don't have to change the variable names.

Answer 2

Turned out to be an import error as suggested by @Sebastian Sebald.

Wrong:

import * as cache from './ScriptCache'

Correct:

import cache from './ScriptCache'