Firebase with Node and Webpack not working - Cannot read property 'navigator' of undefined

Question

I'm getting the following error:

/Users/.../express/server/bundle.js:296
        License: https://www.firebase.com/terms/terms-of-service.html */(function(){var h,n=this;function p(a){return void 0!==a;}function aa(){}function ba(a){a.wb=function(){return a.wf?a.wf:a.wf=new a();};}function ca(a){var b=typeof a==="undefined"?"undefined":_typeof(a);if("object"==b){if(a){if(a instanceof Array)return "array";if(a instanceof Object)return b;var c=Object.prototype.toString.call(a);if("[object Window]"==c)return "object";if("[object Array]"==c||"number"==typeof a.length&&"undefined"!=typeof a.splice&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("splice"))return "array";if("[object Function]"==c||"undefined"!=typeof a.call&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("call"))return "function";}else return "null";}else if("function"==b&&"undefined"==typeof a.call)return "object";return b;}function da(a){return "array"==ca(a);}function ea(a){var b=ca(a);r

TypeError: Cannot read property 'navigator' of undefined
    at /Users/.../server/bundle.js:296:4904
    at Object.<anonymous> (/Users/.../server/bundle.js:296:143270)
    at __webpack_require__ (/Users/.../server/bundle.js:20:30)
    at Object._typeof (/Users/.../server/bundle.js:239:18)
    at __webpack_require__ (/Users/.../server/bundle.js:20:30)
    at Object.i (/Users/.../server/bundle.js:52:14)
    at __webpack_require__ (/Users/.../server/bundle.js:20:30)
    at /Users/.../server/bundle.js:40:18
    at Object.<anonymous> (/Users/.../server/bundle.js:43:10)
    at Module._compile (module.js:435:26)

This is my webpack config:

var webpack = require('webpack');

module.exports = {
  entry: './server/entry.js',
  output: {
    filename: './server/bundle.js'
  },
  target: "node",
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.webpack.js', '.js', '.json'],
    modulesDirectories: [
      'node_modules'
    ]
  },
  module: {
    loaders: [
      { 
        test: /\.json$/,
        exclude: '/node_modules/', 
        loader: "json-loader" 
      },
      { 
        test: /\.js$/, 
        exclude: '/node_modules/', 
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};

This error prints out when I run "node app.js". I'm trying to run this code using Node and Express for Rest API, so is being loaded within Node.js and not the browser.

Answer 1

The issue you're hitting is because webpack will by default use the "browser" version of Firebase as specified in the firebase package.json, rather than the "main" version (which is the one for node.js). The "browser" version won't work.

According to the webpack configuration docs it looks like you may be able to override its ordering with something like:

"resolve": {
    "packageMains": [ "main", "webpack", "browser", "web", "browserify", ["jam", "main"]]
}

(this is untested; I just took the defaults and moved "main" first)