Meteor 1.3 and standard-minifiers-js

help
1

Hi,

I’m facing an issue when building my app for production environment : the JS minification process throws an exception:

Error
    at new JS_Parse_Error (/Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:196:18)
    at js_error (/Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:204:11)
    at croak (/Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:675:9)
    at as_symbol (/Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:1306:27)
    at vardefs (/Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:1081:25)
    at var_ (/Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:1095:27)
    at /Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:843:30
    at /Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:722:24
    at block_ (/Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:1002:20)
    at ctor.body (/Users/benjamin/.meteor/packages/minifier-js/.1.1.11.t8qbi6++os+web.browser+web.cordova/npm/node_modules/uglify-js/lib/parse.js:975:25)

It’s related to the minification of the ES2015 modules, and more precisely the react-tag-input npm package. The line that makes the minification fail is the one that starts with var { DragDropContext }:

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                     //
// node_modules/react-tag-input/dist-modules/reactTags.js                                                              //
//                                                                                                                     //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                                                                                                       //
var React = require('react');                                                                                          // 1
var ReactDOM = require('react-dom');                                                                                   // 2
var Tag = require('./Tag');                                                                                            // 3
var Suggestions = require('./Suggestions');                                                                            // 4
var { DragDropContext } = require('react-dnd');                                                                        // 5
var HTML5Backend = require('react-dnd-html5-backend');                                                                 // 6
var merge = require('lodash/object/merge');                                                                            // 7
                                                                                                                       // 8

I’ve struggled to track down the issue: I had to customize the standard-minifiers-js to catch the error and print the line that fails.

My guess is that var { DragDropContext } = require('react-dnd'); should have been transpiled to es5 but didn’t.

Here are my first 2 packages in .meteor:

ecmascript
es5-shim

I’m using METEOR@1.3.2.4 and my versions file says:

babel-compiler@6.6.4
babel-runtime@0.1.8

Why is the transpilation failing?

2

Is that the transpiled code? Shouldn’t it be:

var DragDropContext = require('react-dnd');

What does your ES2015 source look like?

3

My guess is that it’s the transpiled code.

Here is the original piece of code: https://github.com/prakhar1989/react-tags/blob/master/dist-modules/reactTags.js#L5

4

I think that should be:

import { DragSource as DragDropContext } from 'react-dnd';

or

import DragDropContext from 'react-dnd';

(in the ES2015 source)

5

If I understand correctly, you suggest that the npm module itself is not ES2015 compliant, and that why the transpiled code is untouched?

If so, why would the build fail during the minification step and not the transpilation step?

6

Is that react-tags an npm module? I thought you were pointing me to your code :stuck_out_tongue:!

As far as I know, npm modules need to be transpiled before they’re imported (or required). The npm install process should perform this step for you. In fact, looking at the module more closely, the source files will have been transpiled with babel.

At this point I really don’t know how you should proceed. The standard-minifiers package will be expecting ES5 - and that line isn’t.

7

To clarify, the following build process is not sufficient:

meteor npm install --production 
meteor build --architecture os.linux.x86_64 --directory $HOME/builddir

I have to customize package.json so that meteor npm install --production transpiles properly?

8

I’m thinking it’s the meteor npm install react-dnd that’s not transpiling properly, as it;s that step which should yield ES5 - but I’m new to the npm ecosystem myself, so my opinion it probably not worth much!

I’d love it if someone with more experience would get involved here … I know you’re out there!

9

In fact it’s due to react-tag-input which has non-ES5 code when building (see https://github.com/prakhar1989/react-tags/issues/63)

1 Like
10

Did you add the ecmascript package? I had this same problem, not realizing you need to actually manually ‘meteor add ecmascript’ after upgrading to Meteor 1.3+ if you want to use ecma2015 syntax.