unexpected token export

[shlomiassaf]

This issue consolidates #220 #236 #241

First some background:

The library is published with 2 versions ESM & UMD.
The UMD version (1 file, ES5) is kicked of by default.
The ESM version is used by bundlers (e.g webpack), they auto detect it and use ESM.
ESM is actually ES5 + module syntax, that is import / export statements.

It is clear that the issue is caused when ESM is used.
It's also worth noting the angular is packages the same way (expect plugins, see below)

Test repo

I have prepared a sample project in this repository

It is based on this starter https://github.com/qdouble/angular-webpack2-starter

The setup uses webpack 2 and angular 2.1.0
It allows to test JIT and AOT.

I did not get the unexpected token export with this setup.
The setup does not use babel loader.

To identify the issue I will need your help.
I have 2 suspects for now:

• Webpack 1
• Plugins

Plugins for the library (bootstrap, vex etc...) are published within the package, they don't come in a separate package. It might be the issue in some setups.

Please help me with details about your setup so I can find the problem.

[paradite]

Here is my setup:

  "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/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@types/jquery": "^2.0.33",
    "@types/lodash": "^4.14.37",
    "angular2-jwt": "^0.1.24",
    "angular2-modal": "^2.0.1",
    "core-js": "^2.4.1",
    "dragula": "^3.7.2",
    "font-awesome": "^4.6.3",
    "hammerjs": "^2.0.8",
    "intl": "1.1.0",
    "jquery": "^3.1.1",
    "lodash": "^4.16.4",
    "moment": "^2.15.1",
    "ng2-dragula": "^1.2.1",
    "ng2-tag-input": "^0.3.7",
    "normalize.css": "^5.0.0",
    "rxjs": "5.0.0-beta.12",
    "web-animations-js": "^2.2.2",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "autoprefixer": "^6.5.0",
    "awesome-typescript-loader": "^2.2.4",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "postcss-cssnext": "^2.8.0",
    "postcss-loader": "^0.13.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "url-loader": "^0.5.5",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }

there is no error if I use babel in webpack:

      {
        test: /\.js$/,
        include: /(angular2-modal)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },

[inzerceubytovani]

In my setup I don't use webpack but gulp for generating production version. For developing I use systemjs and there is no prolbem with newest version of angular2-modal. But when I try to create a bundle with gulp browserity, I got that Import Export error:

gulp.task('bundle-client', function() {
    return browserify('build/main.js', {standalone: 'main'})
        .bundle()
        .on('error', function(err) {
            //print the error
            console.log(err);
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('build'))
        .pipe(streamify(uglify()))
        .pipe(rename('bundle.min.js'))
        .pipe(gulp.dest('build'))

})

I tried also inspirate with fix babel i webpack similar solution in gulp:
.transform("babelify", {presets: ["es2015"], only: /\/node_modules\/angular2-modal\//})

But that does not help.

[synapze]

My setup is with WebPack 1 and configured exactly like this - https://angular.io/docs/ts/latest/guide/webpack.html

All my modals are custom modal dialogs using the bootstrap plugin as per the example found here - http://embed.plnkr.co/ZAZqZu/ <-- this example uses systemJS, I'm using Webpack 1 with Babel

The error I get is
Uncaught ReferenceError: angular2_modal_1 is not defined

[jvanharn]

The problem is that the entire project is compiled as ES6, which wont work in a lot of browsers. Can anybody re-release in ES5? A lot of browsers don't support all the keywords consistently.

[jvanharn]

If you use jspm w/ system.js, you can add the following to your config.js in the "map": { } section:
"angular2-modal/plugins/bootstrap": "npm:[email protected]/bundles/angular2-modal.bootstrap.umd.js"

[inzerceubytovani]

I moved to webpack and everythings works now great. So for me is this issue resolved.

[inzerceubytovani]

Problem returns again when I use webpack and Angular universal. It's because server it's compiled as node with angular2 ts files, so when I include: import { Modal, BSModalContext } from 'angular2-modal/plugins/bootstrap';

I got error during starting server (compilation is okay):

`.../node_modules/angular2-modal/plugins/bootstrap/index.js:7
export { BSModalContext, BSModalContextBuilder } from './modal-context';
^^^^^^

SyntaxError: Unexpected reserved word
`

It's because export it's not allowed word (reserved) word for node.

But I think in this case is nessesary to make some conditions with isNode or isBrowser with angular2 universal to prevent node process this actions which generates those errors..

[shlomiassaf]

@jvanharn The project is not compiled in ES6, it is compiled in ESM which is ES5 + module syntax.

ESM is how angular is distributed, the core angular2-modal package is packages how it should.

If you want a 100% ES5 syntax use the UMD bundles, they should load automatically if your'e not use a module bundler. If you do then ESM shouldn't be an issue.

Now, from some digging, experimenting and the reports above the problem is caused by the combination of 2 factors:

• Using Webpack 1.
• Using a plugin

Of course using a plugin is a must :)

Webpack 1 does not know how to handle ESM, it uses the UMD bundles supplied in the package.
Plugins in this package are not part of the core module, they are not loaded or referenced from the core module. (which results in less code added when not shaking)
Accessing a plugin is something like this:

import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';

Notice we are not importing the core (angular2-modal) but an inner path.
Webpack treats angular2-modal/plugins/bootstrap as a module/package so it looks for package.json since none found it defaults to index.js which is ESM. Webpack 1 does not know ESM so it fails.

Hooray, a solution:

To solve this issue I need to place a dummy package.json file telling webpack where to look for the file which is the path to the UMD bundle.

I will post a solution in several hours with dummy package files.

[shlomiassaf]

2.02 is out, should fix it

[john-surcombe]

2.0.2 solves the problem I was having - thanks!