Firebase-js-sdk: SyntaxError when bundling Firebase 4.6.0 using Webpack and UglifyJs

[4cm4k1]

Describe your environment

• Operating System version: macOS 10.13.1 Beta 5
• Firebase SDK version: 4.6.0
• Firebase Product: @firebase/database
• Webpack version: 3.8.1

Describe the problem

Steps to reproduce:

1. I build a webpack bundle that includes @firebase/app and @firebase/database using webpack.optimize.UglifyJsPlugin.

2. The bundle completes, but with an error from UglifyJsPlugin:

   Hash: 464ebfc11e240d05342d
   Version: webpack 3.8.1
   Time: 30386ms
            Asset     Size  Chunks                    Chunk Names
       webpack.js  2.06 MB       0  [emitted]  [big]  main
   webpack.js.map  4.68 MB       0  [emitted]         main
      [6] ./node_modules/@firebase/app/dist/esm/index.js + 1 modules 14.1 kB {0} [built]
     [19] (webpack)/buildin/global.js 488 bytes {0} [built]
     [55] multi ./modules.js ./build/web/main.dart.js 40 bytes {0} [built]
     [56] ./modules.js 35 bytes {0} [built]
    [116] ./node_modules/@firebase/messaging/dist/esm/index.js + 10 modules 62.5 kB {0} [built]
    [118] ./node_modules/@firebase/storage/dist/esm/index.js + 32 modules 128 kB {0} [built]
    [119] ./build/web/main.dart.js 973 kB {0} [built]
       + 113 hidden modules
   
   ERROR in webpack.js from UglifyJs
   Unexpected token name «platform», expected punc «,» [webpack.js:10979,125]
   

3. Based on that output, the error is caused by https://github.com/firebase/firebase-js-sdk/blob/master/packages/database/src/realtime/WebSocketConnection.ts#L152 (locally node_modules/@firebase/database/dist/cjs/src/realtime/WebSocketConnection.js).

4. Serving the website locally fails because of this error in the console: Uncaught SyntaxError: Invalid or unexpected token

Relevant Code:

I'm not sure this is strictly related to Firebase, or to Webpack, or to UglifyJs, or to how the TypeScript source is transpiled to JavaScript. It seems that the interpreter expects a : or , following the platform property.

How the code looks in the distributed package:

var options = {
  headers: {
    'User-Agent': "Firebase/" + Constants_1.PROTOCOL_VERSION + "/" + app_1.default.SDK_VERSION + "/" + process.platform + "/" + device
  }
};

How the code ends up looking in the webpack bundle:

var options = {
  headers: {
    'User-Agent': "Firebase/" + Constants_1.PROTOCOL_VERSION + "/" + app_1.default.SDK_VERSION + "/" + 0.platform + "/" + device
  }
};

For what it's worth, I manually changed the code in the file in node_modules/@firebase/database to use string templating (below) and ran webpack again, and it worked. I'm not sure exactly how it'd be fixed in the TypeScript source, since it is a string template there as well.

var options = {
  headers: {
    'User-Agent': `Firebase/${Constants_1.PROTOCOL_VERSION}/${app_1.default.SDK_VERSION}/${process.platform}/${device}`
  }
};

Thanks!

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

[jshcrowthe]

Hey @4cm4k1 thanks for the issue! At first glance, this seems like an issue with your webpack.config.js. If it is nuking a valid environment variable then you've likely got something wrong on your end.

However, I noticed you are also depending directly on the packages @firebase/app and @firebase/database. For now, I recommend you stick with the main NPM firebase package. The scoped packages (i.e. @firebase/*) are currently all semver major 0 and subject to breaking changes in a minor/patch release (see the semver spec on this).

Try refactoring to the main dependency (you can still import firebase/app and firebase/database and get effectively the same behavior) and see if that helps alleviate your issue. If not a small repro with your webpack config would help me debug.

[4cm4k1]

Hey @jshcrowthe, thanks for the quick response. I tried importing the main firebase package, and got a similar though not exactly the same issue:

    function installNextTickImplementation() {
        registerImmediate = function(handle) {
            0.nextTick(function () { runIfPresent(handle); });
        };//^--- this zero also was `process` and got nuked
    }

AHHHHH, I found it! (midway through copying my webpack.config.js for you) 😳

I'm not even sure why, but I had this in my plugins config:

javascript plugins: [ new webpack.DefinePlugin({ process: '0' }), new webpack.optimize.ModuleConcatenationPlugin() ]

Got rid of it, and I'm issue-free! Thanks for your help rubber-ducking though! 😂

[jshcrowthe]

Haha! That would do it.

Glad you're good to go! Let us know if we can do anything to help out! 😄