Firebase-js-sdk: Uncaught SyntaxError: The requested module '../../webchannel-wrapper/dist/index.js' does not provide an export named 'ErrorCode'

[lpellegr]

Using firebase package from NPM in version 5.3.0, importing firebase with ES6 module import:

import {firebase} from '../../node_modules/firebase/dist/index.esm.js';

firebase.initializeApp({...});

const auth = firebase.auth();
const database = firebase.database();
const firestore = firebase.firestore();
const functions = firebase.functions();
const storage = firebase.storage();

raises the following error:

Uncaught SyntaxError: The requested module '../../webchannel-wrapper/dist/index.js' does not provide an export named 'ErrorCode'

All related issues I have found are marked are closed or resolved. Is my usage wrong?

I need to import auth, database, firestore, functions and storage

My usage is with a Polymer 3 app that aims to be eventually packaged.

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[google-oss-bot]

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

[lpellegr]

Context, error message and reproduction steps are given.

[lpellegr]

Changing the import to import firebase from 'firebase'; produces the exact same error as above.

[lpellegr]

Here is a full example for reproducing:

https://github.com/lpellegr/pwa-starter-kit-firebase-import

The example is based on pwa-start-kit-no-redux template. I have simply added the following lines:

https://github.com/lpellegr/pwa-starter-kit-firebase-import/commit/b506824bb95a581525ba69a7857865a7bd01ad06#diff-842138042367a60b6d00ce81115f99ed

To run the example, execute npm install, polymer serve, then open http://127.0.0.1:8081/ with Chrome. You will get the following error message on the console:

Uncaught SyntaxError: The requested module '../../webchannel-wrapper/dist/index.js' does not provide an export named 'ErrorCode'

[lpellegr]

@mikelehen @jshcrowthe I have added an example for reproduction. Any idea if the issue is due to a bad usage? or is it an issue that is going to be fixed?

[mikelehen]

@lpellegr Sorry, unfortunately I have no idea and @jshcrowthe is unavailable for the next couple weeks. It may be worth trying to isolate how your project is different from other projects that do work. There must be something about the build process, etc. that is causing an issue. Maybe that would shed some light. Sorry I can't be of more help right now.

[mario-aleo]

@mikelehen could it be because 'webchannel-wrapper' doesn't seems to have an ES Module implementation like the others firebase modules?
firebase-auth works great and all its dependencies seem to have a .esm.js option to use because of the differences on the export syntax.

[lpellegr]

@mikelehen Thanks for your answer. As mario-aleo pointed out, the issue seems to come from the fact that _webchannel-wrapper_ does not provide an ESM implementation like other Firebase modules (despite being a transitive dependency). I checked again with the minimal example I provided above and the main differences with other projects that work seem to be that firebase ESM imports are.

[mikelehen]

@jshcrowthe is probably best to speak to this...

[MarcMouallem]

Importing only firebase app and only what you need fixes the problem for me.
import firebase from 'firebase/app'; not import firebase from 'firebase';

[mario-aleo]

@MarcMouallem unfortunately I've tried both ways (I prefer the "only what you need" way) and it still isn't working, at least not in a ES Module behavior/environment :(

[mario-aleo]

I just forgot to make that FR related to this issue, sorry :(

[lpellegr]

@jshcrowthe any idea if module imports will be supported for _webchannel-wrapper_ soon?

[mario-aleo]

@lpellegr they did it :)
@Feiyang1, this is working good, thank you :)

[lpellegr]

Yep, big thanks to @Feiyang:

https://firebase.google.com/support/release-notes/js#5.5.2