meteor run --production not working: Uncaught SyntaxError: Unexpected token import #724

mjwheatley · 2017-11-20T17:37:33Z

I'm submitting a ... (check one with "x")

[] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
Not sure if this is an ngx-translate issue or a Meteor issue.
Meteor application loads and runs in development mode (meteor run), but stops working in production mode (meteor run --production). I removed the standard-minifier-js package and it still does not work.
Receiving the following error:
Uncaught SyntaxError: Unexpected token import

on this line of code:
import { Directive, ElementRef, Input, ChangeDetectorRef } from '@angular/core';

Expected/desired behavior
Application should run after production build.

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar. You can use this template as a starting point: http://plnkr.co/edit/tpl:WccVZSBM0rUgq2sXSUbe

git clone https://github.com/Urigo/angular-meteor-base.git
meteor npm install
meteor run

Open http://localhost:300 and see that application is running in development mode
Then stop the app (control C) and run in production mode.

^C
meteor run --production

Open http://localhost:300 and see that application is running in production mode (expected behavior)

Now add the TranslateModule
npm install --save @ngx-translate/core @ngx-translate/http-loader

Edit the client/imports/app/app.module.ts
Add required imports

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from "@ngx-translate/core";
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

Add modules to the imports

HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })

Export the loader function

export function createTranslateLoader(http:HttpClient) {
    return new TranslateHttpLoader(http, '/i18n/', '.json');
}

meteor run

Open http://localhost:300 and see that application is running in development mode
Then stop the app (control C) and run in production mode.

^C
meteor run --production

Open http://localhost:300 and see that application does not work.

What is the expected behavior?
The application should run in production mode.

What is the motivation / use case for changing the behavior?
So that a Meteor application can be bundled for production

Please tell us about your environment:
Mac OS 10.13.1
Meteor v1.6
meteor node --version => v8.8.1
meteor npm --version => v5.4.2

packages:
"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^2.0.0"

ngx-translate version: x.x.x
8.0.0
Angular version: 2.x.x
4.4.6
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Chrome Version 62.0.3202.94 (Official Build) (64-bit)

The text was updated successfully, but these errors were encountered:

mjwheatley · 2017-11-22T15:27:17Z

Previously reported on angular-meteor repo Urigo/angular-meteor#1755

mjwheatley · 2017-11-22T21:09:42Z

In Urigo/angular-meteor#1755 @ardatan comments: "Actually this is problem of ngx, because they have to make a bundle for commonjs like other Angular libraries ..."

Would it be feasible for this module to support integration with MeteorJS by adding support for commonjs?

ocombe · 2017-11-22T21:17:12Z

Yes, I was actually thinking about updating the build system (this one is largely outdated), it would also improve the size of the lib.

mjwheatley · 2017-11-22T21:28:22Z

Would you be able to provide a potentially timeframe for adding this support?

…ors" BREAKING CHANGE: I've finally taken the time to update the entire build system for the library using ng-packagr instead of my own custom webpack config. I've also added support for rxjs lettable operators at the same time, it means that I've been forced to add a peer dependency for RxJS >= 5.5.2. and I've updated the minimum Angular version to >=5.0.0. The library should be much smaller (from ~80ko to ~20ko for the umd bundle!) and it now supports ES2015 to be tree-shackable which might drop the size even more. It should also fix the "Unexpected token import errors" that some people were experiencing. Unfortunately this might be breaking people since the peer dependency have changed and that's why it's a new major version. Closes #724, Fixes #581

mjwheatley · 2017-11-25T18:12:44Z

This fix may also close issue #681

mjwheatley · 2017-11-25T18:28:50Z

I updated the packages in my Meteor project and ran it in production mode. I am no longer getting the reported error "Unexpected token import". Unfortunately I am getting a different error and it is still not working in production.

Now I am getting ERROR TypeError: e is not a function. I removed the standard-minifier-js meteor package and the error is ERROR TypeError: factory is not a function.

modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:24351 ERROR TypeError: factory is not a function
    at _callFactory (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:34610)
    at _createProviderInstance$1 (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:34556)
    at resolveNgModuleDep (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:34534)
    at _createClass (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:34592)
    at _createProviderInstance$1 (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:34552)
    at resolveNgModuleDep (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:34534)
    at NgModuleRef_.get (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:35961)
    at resolveDep (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:36594)
    at createClass (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:36434)
    at createDirectiveInstance (modules.js?hash=7de06e8ab28fbf2713cf9fea7563fabadcdf9957:formatted:36223)

On this line console.error.apply(console, values); in the following method.

* @param {?} console
 * @param {...?} values
 * @return {?}
 */
                                function defaultErrorLogger(console) {
                                    var values = [];
                                    for (var _i = 1; _i < arguments.length; _i++) {
                                        values[_i - 1] = arguments[_i];
                                    }
                                    console.error.apply(console, values);
                                }

Any ideas?

Here are my package versions after updating:

"dependencies": {
    "@angular/animations": "^5.0.3",
    "@angular/common": "^5.0.3",
    "@angular/compiler": "^5.0.3",
    "@angular/core": "^5.0.3",
    "@angular/forms": "^5.0.3",
    "@angular/http": "^5.0.3",
    "@angular/platform-browser": "^5.0.3",
    "@angular/platform-browser-dynamic": "^5.0.3",
    "@angular/router": "^5.0.3",
    "@ngx-translate/core": "9.0.1",
    "@ngx-translate/http-loader": "^2.0.0",
    "babel-runtime": "^6.20.0",
    "meteor-node-stubs": "~0.3.0",
    "meteor-rxjs": "^0.4.8",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.16"
  }

mjwheatley · 2017-11-27T04:01:50Z

Would a similar update to the @ngx-translate/http-loader package help you think?

mjwheatley · 2017-11-27T16:45:51Z

I changed useFactory: (createTranslateLoader) to useFactory: createTranslateLoader, removing the parenthesis around createTranslateLoader and it works now.

ocombe · 2017-11-27T16:47:42Z

ok, that's weird, but it's nice that you fixed it!

mjwheatley mentioned this issue Nov 20, 2017

meteor run --production stops working after adding ngx-translate module Urigo/angular-meteor-base#67

Closed

mjwheatley changed the title ~~meteor run --production not working with TranslateModule~~ meteor run --production not working: Uncaught SyntaxError: Unexpected token import Nov 20, 2017

ardatan mentioned this issue Nov 22, 2017

Uncaught SyntaxError: Unexpected token import Urigo/angular-meteor#1755

Closed

ocombe closed this as completed in fa318f7 Nov 23, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

meteor run --production not working: Uncaught SyntaxError: Unexpected token import #724

meteor run --production not working: Uncaught SyntaxError: Unexpected token import #724

mjwheatley commented Nov 20, 2017 •

edited

Loading

mjwheatley commented Nov 22, 2017

mjwheatley commented Nov 22, 2017

ocombe commented Nov 22, 2017

mjwheatley commented Nov 22, 2017

mjwheatley commented Nov 25, 2017 •

edited

Loading

mjwheatley commented Nov 25, 2017 •

edited

Loading

mjwheatley commented Nov 27, 2017

mjwheatley commented Nov 27, 2017

ocombe commented Nov 27, 2017

meteor run --production not working: Uncaught SyntaxError: Unexpected token import #724

meteor run --production not working: Uncaught SyntaxError: Unexpected token import #724

Comments

mjwheatley commented Nov 20, 2017 • edited Loading

mjwheatley commented Nov 22, 2017

mjwheatley commented Nov 22, 2017

ocombe commented Nov 22, 2017

mjwheatley commented Nov 22, 2017

mjwheatley commented Nov 25, 2017 • edited Loading

mjwheatley commented Nov 25, 2017 • edited Loading

mjwheatley commented Nov 27, 2017

mjwheatley commented Nov 27, 2017

ocombe commented Nov 27, 2017

mjwheatley commented Nov 20, 2017 •

edited

Loading

mjwheatley commented Nov 25, 2017 •

edited

Loading

mjwheatley commented Nov 25, 2017 •

edited

Loading