Babelify used with tsify and firebase does not generate correct code

Question

I have landed at this point after a long chain of changes to my build environment. I never used babel because it was not neccessary. But including the firebase package broke the build and all solutions I found online suggested using babel to transform the package to something that compiles. But when I am now compiling my code firebase can't be found at runtime.

My ts code:

import firebase from 'firebase/compat/app';

const auth = firebase.auth();

which generates this error at runtime:

Login.ts:15 Uncaught TypeError: app_1.default.auth is not a function

My gulp script looks like this:

        let buildTask = browserify({
            basedir: Config.srcPath,
            debug: Flags.isDebug,
            entries: ['./index.ts'],
            cache: {},
            packageCache: {}
        })
            .plugin('tsify')
            .transform('babelify', {
                presets: [
                    ["@babel/preset-env", {
                        "useBuiltIns": "usage",
                        "corejs": 3,
                    }]
                ],
                sourceMaps: true,
                global: true,
                extensions: ['.tsx', '.ts', '.js'],
                ignore: [/\/node_modules\/(?!(firebase\/|@firebase\/))/]
            })
            .bundle()
            .pipe(source('bundle.js'))
            .pipe(buffer());

And my tsconfig for completeness:

{
    "compilerOptions": {
        "strict": true,
        "strictNullChecks": false,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "module": "CommonJS",
        "target": "es6"
    }
}

I am thankfull for any pointers!

score 0 · Answer 1 · answered Nov 07 '21 at 10:32

Wel it turns out it did, I just had to add two imports:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

I don't really understand what an import without something imported does in typescript. But it seems like it triggers that the js code is being imported by babel (or browserify?)

Babelify used with tsify and firebase does not generate correct code

1 Answers1