Angularfire: Uncaught SyntaxError: Unexpected token export

Created on 21 Sep 2016 · 11Comments · Source: angular/angularfire

After deploying my app (that works fine locally) onto Heroku I get the following error in the console when loading main.bundle.js:

Uncaught SyntaxError: Unexpected token export

Here's the line where the error originates (angularfire2/index.js):

export * from './angularfire2';
//# sourceMappingURL=index.js.map


/*****************
 ** WEBPACK FOOTER
 ** ./~/angularfire2/index.js
 ** module id = 32
 ** module chunks = 1
 **/

Here's my package.json:

{
  "name": "app",
  "version": "0.1.0",
  "scripts": {
    "typings-install": "typings install",
    "postinstall": "npm run typings-install",
    "build": "webpack --inline --colors --progress --display-error-details --display-cached",
    "watch": "npm run build -- --watch",
    "server": "node app.js",
    "dev": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 8000 --host 0.0.0.0 --content-base dist",
    "start": "npm run build; npm run server;"
  },
  "engines": {
    "node": "5.10.1",
    "npm": "3.10.7"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0-rc.3",
    "@angular/upgrade": "2.0.0",
    "@types/request": "0.0.30",
    "angular2-google-maps": "^0.15.0",
    "angular2-materialize": "^5.1.0",
    "angular2-template-loader": "^0.5.0",
    "angularfire2": "^2.0.0-beta.5",
    "awesome-typescript-loader": "^2.2.1",
    "copy-webpack-plugin": "^3.0.1",
    "core-js": "^2.4.0",
    "express": "^4.14.0",
    "firebase": "^3.3.0",
    "geofire": "^4.1.1",
    "hammerjs": "^2.0.8",
    "html-webpack-plugin": "^2.22.0",
    "ie-shim": "^0.1.0",
    "materialize-css": "^0.97.7",
    "moment": "^2.15.0",
    "morgan": "^1.7.0",
    "ng2-file-upload": "^1.0.3",
    "node-sass": "^3.8.0",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "sass-loader": "^4.0.0",
    "typescript": "^2.0.0",
    "typings": "^1.0.5",
    "webcomponents.js": "^0.7.22",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1",
    "webpack-merge": "^0.14.1",
    "zone.js": "0.6.21"
  },
  "devDependencies": {}
}

Here's my webpack config:

var webpack = require('webpack');
var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

// Webpack Config
var webpackConfig = {
  entry: {
    'polyfills': './src/polyfills.browser.ts',
    'vendor':    './src/vendor.browser.ts',
    'main':       './src/main.browser.ts'
  },

  output: {
    path: './dist',
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({ name: ['main', 'vendor', 'polyfills'], minChunks: Infinity }),
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
    ),

    // copy index.html from src to dist
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      chunksSortMode: 'dependency'
    }),

    // copy assets
    new CopyWebpackPlugin([
      {
        // roboto font
        from: path.join(__dirname, "/node_modules/materialize-css/fonts"),
        to: "fonts"
      }
    ]),

    // materialize
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        Hammer: "hammerjs/hammer"
    })

  ],

  module: {
    loaders: [
      // .ts files for TypeScript
      { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },

      // css
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },

      // scss
      { test: /\.scss$/, exclude: 'node_modules', loaders: ['raw-loader', 'sass-loader'] },

      // html
      { test: /\.html$/, loader: 'raw-loader' },

      // materialise
      { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },
    ]
  },

  // sass-loader options
  sassLoader: {
    // add node_modules to path so we can load scss files from it
    includePaths: [path.resolve(__dirname, "./node_modules")]
  }


};


// Our Webpack Defaults
var defaultConfig = {
  devtool: 'cheap-module-source-map',
  cache: true,
  debug: true,
  output: {
    filename: 'js/[name].bundle.js',
    sourceMapFilename: 'js/[name].map',
    chunkFilename: 'js/[id].chunk.js'
  },

  resolve: {
    modulesDirectories: [
      "node_modules", 
      "dist/bower_components"
    ],
    root: [ path.join(__dirname, 'src') ],
    extensions: ['', '.ts', '.js']
  },

  devServer: {
    historyApiFallback: true,
    watchOptions: { aggregateTimeout: 300, poll: 1000 }
  },

  node: {
    global: 1,
    crypto: 'empty',
    module: 0,
    Buffer: 0,
    clearImmediate: 0,
    setImmediate: 0
  }
};

var webpackMerge = require('webpack-merge');
module.exports = webpackMerge(defaultConfig, webpackConfig);

and my app.js

var express = require('express'); 
var morgan = require('morgan')
var app = express();

// logging to stdout
app.use(morgan('combined'));

// serve /dist folder
app.use(express.static(__dirname + '/dist'));

 // bind to port set in env (for heroku), otherwise port 8000 (for local)
app.listen(process.env.PORT || 8000);

Any idea what's causing this?

Source

maxmumford

All 11 comments

@maxmumford hmm, this is undoubtedly due to the change in the latest release that ships ES modules at the project root instead of CommonJS. But the release does include a UMD bundle, which is referenced from the main field of package.json, so I'm surprised WebPack isn't just resolving automatically.

Summoning WebPack experts @robwormald @TheLarkInn or @gdi2290 any idea what could be going wrong here?

jeffbcross on 22 Sep 2016

@jeffbcross I believe it's because of a simple typo. package.json has "main": "bundles/angularfire2.umd.js" while the file itself is angularFire2.umd.js.

ivoviz on 22 Sep 2016

Ahh, yes. I believe @davideast has fixed or is fixing that.
On Wed, Sep 21, 2016 at 4:56 PM John Smith [email protected] wrote:

@jeffbcross https://github.com/jeffbcross I believe it's because of a
simple typo. package.json has "main": "bundles/angularfire2.umd.js" while
the file itself is angularFire2.umd.js.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/543#issuecomment-248777009,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAcTV1crBSBNofdiWvHQdTFSo03k77jMks5qscQ3gaJpZM4KC6mm
.

jeffbcross on 22 Sep 2016

👍1

So the package.json I see above is webpack 1. Webpack one will only resolve from main field. Where v2 will resolve from browser field, etc. I haven't finished reading issue but dropping immediate impressions.

TheLarkInn on 26 Sep 2016

Looks like #534 might provide a fix for this, but we're waiting for the author to sign the CLA

maxmumford on 3 Oct 2016

Facing the same issue.
@maxmumford, is there a workaround?

siriscac on 4 Oct 2016

@siriscac I'm deploying an MVP this week so if it's not merged by then I'll probably fork the PR and use that until it's been merged. I'll update this thread with what I finally do.

maxmumford on 4 Oct 2016

👍1

I couldn't wait any longer for for committer of PR #534 to sign the CLA so I opened my own PR here: #599.

In the meantime while that's merged, I found a workaround that let me deploy my project on Heroku today:

Forked angularfire2
copy the fix from #534
Commit to my own fix branch
Publish my branch with the fix as angularfire2-cocept on npm
Remove "angularfire2" from my package.json
Add "angularfire2-cocept" to my package.json
Update all imports from "import ... from 'angularfire2'" to "import ... from 'angularfire2-cocept'"
Publish to Heroku

Feel free to use angularfire2-cocept, I'll probably rebase it every now and then, but as soon as the fix in PR #599 or #534 is merged I'll switch back to angularfire2.

Edit:
I originally based angularfire2-cocept on af2 master but ran into some typings issues introduced after 2.0.0-beta.5.

To get round that, I have released a new version, 2.0.0-beta.6, which is a fork of [email protected] with the package.json fix added.

So if you do use angularfire2-cocept, know that [email protected] is a fork of angularfire2@962b37dce072204e7909bc912434518f3ce1ae09, whereas [email protected] is a fork of [email protected]

............. slightly messed up I know but it's just temporary 😅

maxmumford on 6 Oct 2016

👍1

Just to let everybody know, #599 has now been merged so we'll have it on master or the next release.

Thanks everybody

maxmumford on 11 Oct 2016

I've experienced the same error with script loader:

Uncaught SyntaxError: Unexpected token export

/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
module.exports = function(src) {
if (typeof execScript !== "undefined")
execScript(src);
else
eval.call(null, src); <---- Error thrown here (line 9)
}

//////////////////
// WEBPACK FOOTER
// ./~/script-loader/addScript.js
// module id = 1

Any ideas?