app.js is too large and contains plain source code

[ruoru]

app.js is 3.7MB and non-uglified (source is visible) on http://studio.theweflex.com/

Steps to reproduce:

• Open developer console
• Access and login on http://studio.theweflex.com/
• Look at the Developer console for app.js and preview
• EXPECTED: <1MB size of uglified source code
• ACTUAL: 3.7MB, source is readable

Steps to solve:

• achieve studio-web repository to compress app.js: pull compress app.js #381
• deploy to dev
• test on dev
• push to production
• final acceptance test

[alexljy]

@ruoru is this gonna be done tomorrow? @rngadam might need some help for this one i think

[ruoru]

@alexljy ok, i try to sovled this question today. i might need some help @rngadam

[rngadam]

More explanation on the problem:

the dist/app.js file that is the output of the build process contains plain-readable file (meaning anyone can copy/read the code from the application). Published code is here: http://studio.theweflex.com/app.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

Usually, production build (uglification/minification), this should be a much smaller file that is hard to reverse-engineer.

Current npm run build output is:

studio-web> npm run build

> @weflex/studio-desktop@1.19.0 prebuild /Users/rngadam/coderbunker/prj/weflex/studio-web
> test -e dist || npm run staticAssets && test -e typings || npm run typings


> @weflex/studio-desktop@1.19.0 build /Users/rngadam/coderbunker/prj/weflex/studio-web
> npm run prebuild && NODE_ENV=prod webpack --optimize-dedupe


> @weflex/studio-desktop@1.19.0 prebuild /Users/rngadam/coderbunker/prj/weflex/studio-web
> test -e dist || npm run staticAssets && test -e typings || npm run typings

ts-loader: Using typescript@2.1.4 and /Users/rngadam/coderbunker/prj/weflex/studio-web/tsconfig.json
Hash: 37e26de23838cc1aee36
Version: webpack 1.12.9
Time: 19747ms
                         Asset     Size  Chunks             Chunk Names
    images/views/navbar/bg.png   7.6 kB          [emitted]  
images/views/member/people.svg  2.73 kB          [emitted]  
                        app.js   3.9 MB       0  [emitted]  app.js
                login/index.js  1.24 MB       1  [emitted]  login/index.js
               signup/index.js  1.22 MB       2  [emitted]  signup/index.js
    + 1129 hidden modules

if we change this to use the -p parameter, we get:

npm run prebuild && NODE_ENV=prod webpack -p

output:

> npm run build

> @weflex/studio-desktop@1.19.0 prebuild /Users/rngadam/coderbunker/prj/weflex/studio-web
> test -e dist || npm run staticAssets && test -e typings || npm run typings

> @weflex/studio-desktop@1.19.0 build /Users/rngadam/coderbunker/prj/weflex/studio-web
> npm run prebuild && NODE_ENV=prod webpack -p

> @weflex/studio-desktop@1.19.0 prebuild /Users/rngadam/coderbunker/prj/weflex/studio-web
> test -e dist || npm run staticAssets && test -e typings || npm run typings

ts-loader: Using typescript@2.1.4 and /Users/rngadam/coderbunker/prj/weflex/studio-web/tsconfig.json

Hash: 635f2e5e765a8af0b704
Version: webpack 1.12.9
Time: 63954ms
                         Asset     Size  Chunks             Chunk Names
images/views/member/people.svg  2.73 kB          [emitted]  
    images/views/navbar/bg.png   7.6 kB          [emitted]  
                        app.js  1.63 MB       0  [emitted]  app.js
                login/index.js   447 kB       1  [emitted]  login/index.js
               signup/index.js   439 kB       2  [emitted]  signup/index.js
    + 1113 hidden modules

and now app.js content looks like this:

!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - supe

see: https://webpack.js.org/guides/production/

[rngadam]

This has been there for a long time (since January 2017) where this commit dropped the -p:

> git show 54d7c702 package.json
commit 54d7c702666ae79e8cda197168a49c2586affd47
Author: Scott Wang <scott.wang@theweflex.com>
Date:   Tue Jan 10 16:13:03 2017 +0800

    Feature: private training (#320)
    
    * New feature: support private training
    
    * Update lockfile
    
    * Trainer: update local states after submit
    
    * Filter out trainers with no PT schedule assigned.
    
    * Add delete trainer and delete PT schedule
    
    * Adjust NavItem size
    
    * Fix API calls on cancelling an order
    
    * Use official npm registry
    
    * Fix production build
    
    * Update PTSchedule modal on receive new props.
    
    * Remove antd from typings as it was unnecessary
    
    * Fix order list sorting

diff --git a/package.json b/package.json
index 74fd866..523d10d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "babel-polyfill": "6.3.14",
     "halogen": "0.1.10",
     "hammerjs": "2.0.6",
+    "hourminute": "^1.1.1",
     "keymirror": "^0.1.1",
     "lodash": "4.0.0",
     "moment": "2.10.6",
@@ -57,7 +58,7 @@
   "scripts": {
     "test": "make test",
     "dev": "webpack-dev-server",
-    "build": "npm run prebuild && webpack -p --optimize-dedupe",
+    "build": "npm run prebuild && NODE_ENV=prod webpack --optimize-dedupe",
     "prebuild": "test -e dist || npm run staticAssets && test -e typings || npm run typings",
     "staticAssets": "cp -r assets dist",
     "typings": "typings install"

[cliuless]

@rngadam
Problem:
On the local drive, after they edit the code, there’s no error
however, when it goes on the dev server, the following error appears:

app.js:35 Uncaught (in promise) TypeError: Right-hand side of 'instanceof' is not an object
    at s (app.js:35)
    at r (app.js:35)
    at app.js:35
    at <anonymous>

These are the steps that @ruoru has taken:

• has editted the code to include -p in his commit
• when he tested on the local drive, there was no error, after he deleted the web pkg file, he ran the script npm run build command
• however when he posted on the dev server, there was the error on the browser console (see above)

[rngadam]

@cliuless have you checked that the versions of NodeJS and the dependencies match on both the local machine and the server?

[cliuless]

@ruoru will try the following solutions

• check the versions of NodeJS he's using
• push code without p (remove the -p)

[cliuless]

@rngadam

• updated version of NodeJS (are there any other environments you suggest updating)
• code works on BOTH local drive and the dev server when -p is taken out

[rngadam]

Investigating this, seems that "TypeError: Right-hand side of 'instanceof' is not an object" is an error at load in the calendar component (the app redirects to the calendar when the main index.jsx loads). It occurs in an incognito window so there's no logged in user yet. It seems to be within a promise chain. If I put some debug code, I can see that this code:

if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")

Receives an e = {} and t = undefined which is why it is failing.

My hypothesis is that there's some code that uses promises but poorly handles failure or some missing resource when deployed on the dev server. It should have to do with serving from the nginx server / dev.theweflex.com domain instead of localhost. Maybe webpack going into a different code path and behaving differently doing it?

Recommendations:

• build to make sure we are using dev.theweflex.com for api calls and websockets calls
• revert to an older version of the calendar to see if there's a recent change in the past 7 months that has broken this
  • one recent difference: we've added a dependency to mixpanel and added track calls there

List of other things that are problematic here when looking at this:

• nginx was started manually at some point in the past (out of control of the systemctl)
  • kiled the existing process and restarted using systemctl start nginx
• there's no nginx configuration for hostname dev.theweflex.com
  • created a config /etc/nginx/conf.d/dev.theweflex.com.conf
• generated dist/ assets points to the production environment
  • should be pointing to dev.theweflex.com
  • need to change the build for dev for NODE_ENV=dev to use the correct GIAN environment
• pushing to branch and installing on the server takes 15mn-30mn! this is not normal at all. Possibly because it's a completely rebuild on the server?

[rngadam]

Another thing that we can test: what happens when we use a local machine nginx setup instead?

[rngadam]

And a note that this happens whether we build on the server or use the locally built version of app.js and push it to the server.