Firebase-js-sdk: Module not found error when using ESM Modules

[Alex-Mann]

Environment

• Operating System version: MacOS 10.15
• Browser version: n/a
• Firebase SDK version: 7.14
• Firebase Product: auth, database

Problem

When trying to load firebase-js-sdk in Node 13.12.0 with the ESM module syntax as shown here under the Node.js apps section, I am getting the following error:

❯ node fbtest.js
(node:61528) ExperimentalWarning: The ESM module loader is experimental.
internal/modules/run_main.js:54
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '<DIR>/node_modules/firebase/app' imported from <DIR>/fbtest.js
    at finalizeResolution (internal/modules/esm/resolve.js:255:11)
    at packageResolve (internal/modules/esm/resolve.js:567:14)
    at moduleResolve (internal/modules/esm/resolve.js:600:14)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:644:13)
    at Loader.resolve (internal/modules/esm/loader.js:94:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:240:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:42:40)
    at link (internal/modules/esm/module_job.js:41:36) {
  code: 'ERR_MODULE_NOT_FOUND'

Relevant Code:

The file is fbtest.js, and inside is:

import firebase from 'firebase/app'
import 'firebase/auth'

console.log(firebase)

I can resort to using Common JS loading syntax, as the following works:

const firebase = require('firebase/app')
require('firebase/auth')

But in the docs it shows a code example that ~should~ work to some extent even if the node says it is experimental.

Maybe I'm doing something incorrectly though... any help is appreciated.

[AdamXA]

Not sure if I'm doing it wrong either, but I was doing the exact same thing and I am getting the same error.

[Feiyang1]

I have opened an issue in the Nodejs repo.
2 workaround ideas:

1. downgrade to Node 10 with --experimental-modules
2. import scoped firebase packages instead of firebase

import firebase from '@firebase/app';  // instead of 'firebase/app'
import '@firebase/auth'; // instead of 'firebase/auth'

[andymatuschak]

The latter workaround suggestion doesn't fare well in Typescript environments, because the type exported from @firebase/app is significantly different from the type exported from firebase/app: the former exports FirebaseNamespace, which is fairly minimal; the latter exports a much more complete namespace type.