Search code examples
javascriptfacebookreactjsfirebasefirebase-hosting

React app building locally, not via Firebase


I finished a React app and would like to deploy it to Firebase for hosting (storage as well but first things first). It's building fine with my Webpack localhost setup, but when I deploy and load with Firebase I get a white screen and:

client.min.js:1 Uncaught SyntaxError: Unexpected token <

There isn't an angle bracket on that line. I've included my error message, firebase HTML ([my-company] is a different string in my code), and webpack.config.js:

<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-storage.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCFRYmS3bFScffCG8Ko7QRieDWExeaa_yE",
    authDomain: "[mycompany]-records.firebaseapp.com",
    databaseURL: "https://[mycompany]-records.firebaseio.com",
    storageBucket: "[mycompany]-records.appspot.com",
  };
  firebase.initializeApp(config);
</script>

webpack.config.js :

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: [
            'react-html-attrs', 
            'transform-class-properties', 
            'transform-decorators-legacy'
          ],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Solution

  • Solution:

    I had the wrong output directory in the Webpack config.

    When Firebase went to look for the minified JS source, it did not find it.

    Firebase automatically loads the root HTML file if it cannot find the JS file. That's where the open angle bracket came from.

    Hooray!