Closed gabrielalmeida closed 9 years ago
Ok, perhaps I've reached an edge case, I could reproduce the exact same error on a small application.
gabrielalmeida/meteor-issue-5387
What happens is that on a package-only architecture I use an umbrella
package(1) that imply
'es ecmascript
, then I have a package(2) that uses ES6 code without declaring that uses ecmascript
. A third package(3) does use the implied ecmascript
from (1) and also the package (2) that uses ES6 code. The third package (3) is the unique added to .meteor/packages
.
It works when running on development
mode but breaks on production
. While running on development
mode the code doesn't need to be minified, and I guess ecmascript
is implied by context. On production, the code is being parsed during minification considering ES6 only if ecmascript
is a direct dependency or implied directly by a package, but not when running in a context that ecmascript
exists.
I am able to run the application on both environments by expliciting that a package does use of ecmascript
.
It sounds like a bug the fact that it works on development and breaks on production without any warning so I'm leaving it open.
I have the same issue. The problem is that the ecmascript plugin does not run on all files as expected.
I have a file that uses ${str}_interpolation
and let = 'scoped var'
the file is never transpiled therfore causes an error in uglify.js
It fails as described above.
If I add a class inside that file:
class Foo {
constructor(){
this.foo = 'foo'
}
onLoad(){
this.foo = 'bar';
console.log(`${this.foo}__`)
}
}
everything works as expected
After I removed a few things inside .meteor/versions
and .meteor/packages
manually, removed and added them again, it seems to be fixed.
Steps I used to fix the issue: (starting from meteor 1.2.1)
meteor remove [plugin]
packages
and versions
filesmeteor add [plugin]
meteor upgrade --patch
I'm not sure which of these steps are needed but for me everything works as expected (very big meteor app)
I'm having this issue as well after adding the meteor ecmascript module. Only on production build as well
@slavik0329 does it happen inside a package or app?
Inside my app. I started rewriting parts of my app to es6 and everything works fine before minification. Uglify-js fails somewhere. I'm also using Angular if that helps.
is the ecmascript plugin listed in your .meteor/plugins
and .meteor/versions
files?
Actually angular shouldn't affect this since as far as I understand every .js
file is transpiled with Babel.
There was some mess when we updated our versions.
Meteor has it's own idea of how things should work, basically the opposite of what everybody else does (IMHO).
So it can be quite annoying to update all pugins and dependencies to make sure everything runs fine. I always have to manually work inside the .meteor
folder to make things work.
If you are unsure on what causes the issue, just create a dummy meteor app and try to get it working there. then try adding some plugins you have installed and see when it fails.
Hope it helps. I can at least confirm that the ecmascript plugin is working as expected on 1.2.2. And like I said we run a huge app on meteor (couple of hundred JS files)
@slavik0329 also please post the exact error message and the part of the code that fails. This will help a lot to figure out what is going on. (rename as necessary if it is a private repo). If the repo is public you might as well just link to the section on github.
In our case files were not transpiled at all. You might have a different problem
Below is the output. In versions I have : ecmascript@0.1.5 ecmascript-collections@0.1.6
and ecmascript in packages.
meteor build --architecture os.linux.x86_64 . && scp site.tar.gz admin@jotcube.com:src/
Errors prevented bundling:
While minifying app code:
/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:196:18:
Unexpected token: punc ())
at new JS_Parse_Error
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:196:18)
at js_error
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:204:11)
at croak
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:675:9)
at token_error
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:683:9)
at unexpected
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:689:9)
at expr_atom
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:1184:13)
at maybe_unary
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:1358:19)
at expr_ops
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:1393:24)
at maybe_conditional
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:1398:20)
at maybe_assign
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:1422:20)
So it fails on a function ()
either something like classes
class Foo {
someFunction() {
// ...
}
}
or this (arrow function)
setTimeout(()=>{
// ...
},10)
is causing the issue. Can you locate the file/line of the error?
I reverted my code to before I added the ecmascript package. I then added the package and only changed a single function to an arrow function. It caused this error now:
$meteor.subscribe("jobInfo", id).then( handle => {
deferred.resolve( $meteor.object(ParseJobs, id) );
handle.stop();
});
Errors prevented bundling:
While minifying app code:
/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:196:18:
Unexpected token: operator (>)
at new JS_Parse_Error
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1kkmbti++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:196:18)
at js_error
can you put a "dummy" class into the file just to see if it works then?
class Foo {
constructor(){
this.foo = 'foo'
}
onLoad(){
this.foo = 'bar';
console.log(`${this.foo}__`)
}
}
keep the rest of the code as it is.
(see my comment above, where it would only work if a class was in the file)
Still failing:
Errors prevented bundling:
While minifying app code:
/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1b7fd2m++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:196:18:
Unexpected token: name (Foo)
at new JS_Parse_Error
(/Users/steve/.meteor/packages/standard-minifiers/.1.0.1.1b7fd2m++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:196:18)
at js_error
the reason that it runs without minification is that your browser probably supports a lot of ES6 features while uglify does not know what ES6 is. The code is never transpiled which obviously causes issues.
Any ideas on how to get it to transpile before hitting uglifyjs? Shouldn't it do this normally? Could it have anything to do with me using .ng.js extensions?
This is the best I can do for you: https://github.com/pixelass/meteor-ES6test
It is a simple meteor project with ES6 in the main JS and inside some subfolder.
There is really nothing special about it
Which version of meteor are you running?
the .ng.js
causes the issue if you are using https://github.com/Urigo/angular-meteor
I can reproduce it locally. If I remove angular it works
the reason is that the angular module takes the file out of the queue and it never gets transpiled. I think there is another way of doing angular in 1.2
@slavik0329 I just updated https://github.com/pixelass/meteor-ES6test to work with angular.
basically just change the file-extension .ng.js
to .js
@pixelass
The reason I was using ng.js extension is because it fixed the dependency injection issue when compiling. Maybe it's but a problem in the current version. I'm using the latest meteor. I'll have to try the rename and see. Thanks so much for helping out
@slavik0329 btw in case you didn't see this: https://www.meteor.com/tutorials/angular/creating-an-app
So after I renamed .ng.js to .js it broke all of the dependency injection minification fixes that meteor does when a file is named .ng.js.
@slavik0329 The .ng.js
file extension means that it is transpiled by the Angular package, not ecmascript
. This would be something to post as a bug on the Angular package, or ask @Urigo.
@gabrielalmeida this code is working as expected. Just because your app has some package that implies ecmascript
, it doesn't mean that all of the other packages will be transpiled. There's nothing in this file: https://github.com/gabrielalmeida/meteor-issue-5387/blob/master/packages/meteor-uses-ecmascript-by-implying/package.js That uses the ecmascript package.
I suspect it's working for you locally because you have a browser that accidentally supports the JavaScript feature you are using.
I'm going to close this issue because the original post is not a bug; if some of the later comments are (for example Angular stuff) they should be opened as separate issues.
@slavik0329 you have to make sure your Angular app is minification safe. you can use the strict-di injector like that:
angular.bootstrap(document, ['myApp'], {strictDi: true});
to test it locally as well.
It's a good practice to add in any case.
Using ng.js
on the current angular
version (1.0) won't transpile into Babel but will add ng-annotate support to help you with minification of Angular code.
If you want to get both, you can use the angular-babel package.
On angular
1.2 we will add Babel and ng-annotate support for all .js
files as a default
@stubailo don't you think "accidently supports" is the wrong term?. it is good that browsers now support ES2015 features. You make it sound as if it was a mistake/accident. Also it is basically the same thing I said in my comment.
@pixelass I think it's great as long as you just want to target the browser you're developing on, but in some sense a dev environment that supports the least stuff would be the best so that you can target all of the browsers you need to.
honestly? so you develop on IE8? (obviously joking here :trollface: We're all friends right?)
I don't really understand your point though. I think it is great to develop with the latest features and then drop in some polyfills like Babel (6to5) for JS and autoprefixer CSSnext for CSS. This way you are always future safe and can remove all the "crap" a polyfill does once you decide to drop support for that browser. The other way around just won't work and will cause a lot of ugly code. You will have to rewrite your entire code if you decide for a cleaner code-base (see jQuery). But this might not be the right platform to discuss this and I don't want to spam this issue.
That being said I think it's great that meteor now has ESnext support and for us it's working great.
@Urigo thanks! This is definitely the right answer. My solution was to run my scripts through ngAnnotate before building and now it's working fine using just the .js extension
Hi @stubailo,
this code is working as expected. Just because your app has some package that implies ecmascript, it doesn't mean that all of the other packages will be transpiled.
Totally understand that, just dropping ecmascript
as direct dependency solves the issue as I reported earlier.
There's nothing in this file: https://github.com/gabrielalmeida/meteor-issue-5387/blob/master/packages/meteor-uses-ecmascript-by-implying/package.js That uses the ecmascript package.
Agreed, package.js
itself doesn't support ES6(#5240). But there is a file that uses ES6 on api.addFiles
:
api.addFiles([
'file-that-uses-es6.js'
], 'client');
That file uses es6.properties.shorthand
transformer here:
ImagePicker = {
getPictures() {
return 'XXXX';
},
};
Did you manage to succesfully run that repo with meteor
and meteor --production
?
At least for me it builds on development but fails without any clear message on production. It breaks during minification step and doesn't show a detailed stack trace, anyone on this situation with a large codebase will need to manually find which packages uses es6
and are missing ecmascript
package.
Thanks
For what it's worth, we had the exact same issue the other day. In development everything worked fine but going to staging was throwing minification errors.
For us the problem was a syntax error in the code base. Since the parse error thrown during minification doesn't specify where the actual error occurred, we had to first find the last commit that did work and then within the next commit track down by a process of elimination where the actual problem occurred. A painful and tedious process as you might imagine..
For us it was a syntax error in one of our custom Blaze components. Within the component we had the following syntax for a helper method definition:
foo( a, b ) {
}
Where it obviously should have been:
foo: function( a, b ) {
}
The code worked just fine (probably because it runs in the browser) but for some reason, this syntax issue wasn't picked up by any linters or other pre-processors involved in the compilation process.
Hope this helps...
@gabrielalmeida by "package.js doesn't use ecmascript
", I meant that you need to actually api.use('ecmascript')
in there.
I think the best option is to make sure all of your package.js
files use ecmascript
.
@northern
foo( a, b ) {
}
this syntax is correct. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
I think the issue is something else.
@pixelass
My code isn't ES6 code and it's not in a package. Further more, it resolved the issue.
@northern well the title of this issue suggest it is ES6 though :wink: because we are all talking about ES6 (ecmascript-plugin) issues which have all been resolved or been outed as "you are using it wrong"
maybe you missed that... Anyways: in that case sorry for the wrong info
@pixelass No worries. I hoped starting my comment with "For what it's worth" would have made it clear that I was simply adding meta information (i.e. slightly of topic) to an existing thread. I experienced the problem in a non ES6 specific environment, so might others. Since this thread ranks high for the given error it might be better to have a little to much info then to little.
:smiley:
I ran into this problem. Solved by "meteor add ecmascript". In my case ecmascript@0.1.6 was defined by a package but not defined globally.
In case this might help someone, what I did to debug this is to drop a debugger
statement just before the place where the error is raised. Then run meteor using this env variable TOOL_NODE_FLAGS="--debug-brk"
. You have to run the node-inspector and connect to the default port http://127.0.0.1:8080/debug?port=5858 . Continue the execution until the debugger statement stops it and then find out which token is causing the error and in which line of the merged file.
I am using angular-meteor and performing Angular route permission checks as described in http://www.angular-meteor.com/tutorials/socially/angular1/user-accounts-authentication-and-permissions.
I am hiting the following when running --production:
=> Errors prevented startup:
While minifying app code: /root/.meteor/packages/standard-minifiers/.1.0.2.1bzej1y++os+web.browser+web.cordova/plugin.minifyStd.os/npm/minifiers/node_modules/uglify-js/lib/parse.js:196:18: Unexpected token: operator (>) at new JS_Parse_Error
Here is my workaround:
var routeAuthCheck = {
- currentUser: ($q) => {
+ currentUser: function($q) {
if (Meteor.userId() == null) {
return $q.reject('AUTH_REQUIRED');
}
else {
return $q.resolve();
}
}
};
This is my first experience with arrow functions and thus I am not completely sure if the expressions are interchangeable in this case, but everything does seem to be working as expected.
My package list: accounts-google 1.0.6 Login service for Google accounts accounts-password 1.1.4 Password support for accounts angular-with-blaze 1.3.4 Everything you need to use both AngularJS and Blaze templates in your Meteor app angular:angular-cookies 1.4.8 AngularJS (official) release. For full solution: http://angular-meteor.com/ angular:angular-sanitize 1.4.8 AngularJS (official) release. For full solution: http://angular-meteor.com/ angularui:angular-google-maps 2.2.1 angular-google-maps (official) angularui:angular-ui-bootstrap 0.13.0 Native AngularJS (Angular) directives for Bootstrap. angularui:angular-ui-router 0.2.15 angular-ui-router (official): Flexible routing with nested views in AngularJS dotansimha:accounts-ui-angular 0.0.2 AngularJS wrapper for Meteor's Account-UI package es5-shim 4.1.14 Shims and polyfills to improve ECMAScript 5 support http 1.1.1 Make HTTP calls to remote servers jquery 1.11.4 Manipulate the DOM using CSS selectors meteor-base 1.0.1 Packages that every Meteor app needs mobile-experience 1.0.1 Packages for a great mobile user experience mongo 1.1.3 Adaptor for using MongoDB and Minimongo over DDP mrt:modernizr-meteor 2.6.2 Modernizr repackaged for Meteor session 1.1.1 Session variable standard-minifiers 1.0.2 Standard minifiers used with Meteor apps by default. stevermeister:angular-flipclock 0.1.1_4 AngularJS wrapper for FlipClock.js tracker 1.0.9 Dependency tracker to allow reactive callbacks twbs:bootstrap 3.3.6 The most popular front-end framework for developing responsive, mobile first projects on the web.
Hi @ppotoplyak,
It feels like your code is not transpiled correctly before minifying it.
Would it be possible that using angular-with-blaze requires you to set the transpiler package? Normal angular without blaze implies a transpiler that combines babel with ng-annotate. However, angular-with-blaze does not imply any transpiler.
Maybe you could try adding ecmascript
to the project or moving forward to angular
, instead of angular-with-blaze
.
I encountered this build error too.
The problem: using a () =>
function in a package without api.use('ecmascript', 'client');
.
Bug was only revealed with --production
flag. It would be much better easier to debug if build failed in development mode as well.
hi @yogiben, how could I find out where the problematic function definition is? We've just migrated to 1.3 and I think we have some one using new syntax like "abc(arg0, arg1) {}" somewhere and that broke the build due to: Errors prevented startup:
While minifying app code: /home/yshi/.meteor/packages/standard-minifier-js/.1.0.7.1a127fc++os+web.browser+web.cordova/plugin.minifyStdJS.os/npm/node_modules/meteor/minifier-js/node_modules/uglify-js/lib/parse.js:196:18: Unexpected token: string (/imports/startup/client) at new JS_Parse_Error
Not sure how we could locate such code
@shiyeling : I had the same problem while deploying to Galaxy. Very difficult to debug and find which ( (Meteor?) package generates the error... Tried for 45 minutes... After pocking around I solved my problem another way:
standard-minifier-css
meteor package (0r add # in front in meteor/packages)ecmascript
meteor package installedIt works fine for production deployment. I have no idea why ;-)
@hervejegou thanks for the tip. We eventually removed the standard-minifier-js plugin to make it work. but the result is that our application still have big blob of concatenated js file, with out source map.
removing the standard-minifier-js package solved this problem (temporarily) for me.
Any fixes that don't involve removing the standard-minifier-js
package? @shiyeling I am getting the same error right now
Here's what I found:
In my case, the 2nd point got me especially, as I'm using 'winston-papertrail' package which requires passing callback function to use the package.
Hope this helps.
Please see related issues #8020 and #7994 instead of commenting further on this very old, closed issue. :smile:
The app fails with
--production
flag or withbuild/bundle
commands, works normally withmeteor run
.I'm using
Meteor 1.2.0.2
withecmascript
package enabled on the app and all local packages.As far as I could understand Meteor is trying to
uglify
untransformed ES6 code before compiling with babel on build step. As "reproduction" shows:File
uglifyme.js
has the content(es6.properties.shorthand
whichecmascript
enables):As stated above it shows a similar stack trace when trying to
uglify
before compiling withbabel
. Runninguglify
from CLI shows the exact same stack trace:Similar to #5362, which indicates that the solution is to use
.jsx
instead of.js
, butecmascript
package should allow.js
as well.