Uncaught SyntaxError: Unexpected token export

[maxmumford]

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?

[jeffbcross]

@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?

[ivoviz]

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

[jeffbcross]

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
#543 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAcTV1crBSBNofdiWvHQdTFSo03k77jMks5qscQ3gaJpZM4KC6mm
.

[TheLarkInn]

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.

[maxmumford]

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

[siriscac]

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

[maxmumford]

@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]

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 Updated package.json to use the correct casing for the 'main' entrypoint #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]

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

Thanks everybody

[ghost]

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?

[AnsarSamad]

me also have the same issue ,
https://github.com/angular/angularfire2/issues/905