Polymer / tools

Polymer Tools Monorepo
BSD 3-Clause "New" or "Revised" License
430 stars 200 forks source link

Bundling breaks support for Firebase storage #603

Closed lpellegr closed 5 years ago

lpellegr commented 6 years ago

Here is a repository for reproducing the issue:

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

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-storage-packaging/commit/6117f376263d42c6514cec73a0c2be9f64752e39

Run yarn install, polymer serve, open http://127.0.0.1:8081.

At this stage, with no bundling the app works properly. All firebase modules are loaded (included storage).

Now, run yarn build:prpl-server, yarn serve:prpl-server, then open http://127.0.0.1:8080.

On Chrome, I get the following error:

Uncaught TypeError: Cannot read property 'path' of null at Function.t.makeFromBucketSpec (firebase-storage.js:1) at Function.t.extractBucket_ (firebase-storage.js:1) at new t (firebase-storage.js:1) at new t (firebase-storage.js:1) at Object.storage (firebase-storage.js:1) at t._getService (firebase-app.js:1) at t.ur.(:8080/anonymous function) [as storage] (http://127.0.0.1:8080/esm-bundled/node_assets/firebase/firebase-app.js:1:34079) at Object.f [as storage] (firebase-app.js:1) at my-app.js:640

On Firefox the error is different most probably because served with es6 flavor instead of esm:

screenshot from 2018-07-23 17-49-07

The fact that the app works with no bundling let's me think there is something wrong with Polymer bundler or a dependency used by it. Unfortunately, I have no knowledge about this part. Any ideas are welcome.

Why not importing Firebase using ES6 imports? There seems to be another issue too.

As a workaround, importing the global Firebase dependency (in public/index.html) allows creating working bundles:

<script src="node_modules/firebase/firebase.js"></script>

However, it has the drawback to load not required dependencies (e.g. firebase-messaging) but also to display a warning in production:

It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.

lpellegr commented 6 years ago

@usergenic @aomarks Any ideas about what could be the issue?

usergenic commented 6 years ago

@lpellegr will take a look.

davie-robertson commented 6 years ago

@usergenic Any joy with a fix for this?

usergenic commented 5 years ago

If you blow out the yarn.lock here and do a fresh yarn install it should show this issue has been fixed. Using polymer-cli@1.9.2