CDN webpackJsonp function conflicts with existing webpackJsonp function

[aputinski]

[REQUIRED] Describe your environment

• Operating System version: macOS 10.12
• Firebase SDK version: 4.1.1 (CDN)
• Firebase Product: all

[REQUIRED] Describe the problem

Steps to reproduce:

It appears that the client is bundled via webpack and uses the CommonsChunkPlugin. My code is also bundled via webpack uses the same plugin. As a result my code defines webpackJsonp on the window and then later when I load Firebase from the CDN it tries to use my webpackJsonp function which won't work because they are different bundles.

<!-- My Wepback bundles -->
<script src="/assets/bundle/common.js"></script>
<script src="/assets/bundle/app.js"></script>
<!-- Firebase -->
<!-- (throws an error) -->
<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase.js"></script>

Firebase should change the name of the jsonp function used to something like webpackJsonpFirebase to avoid conflicts.

https://webpack.js.org/configuration/output/#output-jsonpfunction

This needs to be changed if multiple webpack runtimes (from different compilation) are used on the same webpage.

Relevant Code:

firebase-js-sdk/gulp/tasks/build.js

Line 139 in 4a96189

output: {

[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.

[jshcrowthe]

@aputinski Nice find on this and thanks for the issue! I have this fixed in #43

As a workaround in the meantime, if you are already creating a webpack build of your own, I'd encourage you to use the firebase NPM package.

e.g.

var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");

// Leave out Storage
//require("firebase/storage");

var config = {
  // ...
};
firebase.initializeApp(config);

[aputinski]

Thanks for the quick fix! I'm actually using the npm package — I just happened to stumble upon this issue when I was just testing something out.

[jshcrowthe]

Ahh gotcha. Well thank you for pointing it out 👍. Glad it is fixed for users to come.

[rahul-winner]

I'm facing same issue but with my own projects. Both projects are bundles with webpack 3.x. When I try to load JS files of one project into other. I notice that child project tries to load bundle from 'webpackJsonp' set by parent project.

Could you please suggest how could I fix it? or if I could create custom name for function 'webpackJsonp' my child project.

Thanks a lot !