Issue with ember build "[BABEL]: the code generator has deoptimised the styling of bower_components/bootsrap/....../jquery.js as it exceeds the max of 100KB"


#1

Hi Everyone,

I am new to ember app and trying incredibly hard to scale the learning curve. I have been at it since the last 6 months, have learnt a lot and a lot remains still.

Recently, while trying to configure the app to include bootstrap, something broke. I have been trying since the last 3 days to figure out what went wrong, I was hoping that someone from the community might be able to help me understand things a little better.

Problem:

  1. the ember build process completes with warnings and culminates with a corrupt output file that throws a Uncaught SyntaxError: Invalid or unexpected token on the chromium client, which prevents the app to load.

Symptoms:

  1. "After bower install bootstrap --save and necessary app.import(...) commands, the ember build process threw a couple of warnings [BABEL]: the code generator has deoptimised the styling of bower_components/bootsrap/....../jquery.js as it exceeds the max of 100KB, followed with a 129 JSHint errors.

first few lines of JSHint Errors:

      bower_components/bootstrap/Gruntfile.js: line 8, col 1, 'module' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 18, col 12, 'require' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 19, col 14, 'require' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 20, col 32, 'require' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 21, col 25, 'require' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 28, col 26, 'require' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 29, col 32, 'require' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 434, col 3, 'require' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 435, col 3, 'require' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 23, col 30, '__dirname' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 395, col 18, 'process' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 441, col 13, 'process' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 441, col 38, 'process' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 452, col 7, 'process' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 458, col 24, 'process' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 462, col 14, 'process' is not defined.
      bower_components/bootstrap/Gruntfile.js: line 466, col 24, 'process' is not defined
  17 errors
  bower_components/bootstrap/dist/js/bootstrap.js: line 8, col 61, Missing semicolon.
  bower_components/bootstrap/dist/js/bootstrap.js: line 13, col 53, Missing semicolon.
  bower_components/bootstrap/dist/js/bootstrap.js: line 14, col 59, Expected '===' and instead saw '=='.
  bower_components/bootstrap/dist/js/bootstrap.js: line 14, col 78, Expected '===' and instead saw '=='.
  bower_components/bootstrap/dist/js/bootstrap.js: line 15, col 113, Missing semicolon.
  bower_components/bootstrap/dist/js/bootstrap.js: line 17, col 9, Expected an assignment or function call and instead saw an expression.
  bower_components/bootstrap/dist/js/bootstrap.js: line 35, col 49, Missing semicolon.
  bower_components/bootstrap/dist/js/bootstrap.js: line 42, col 6, Missing semicolon.``

and similar errors pointing to files in the ‘bootstrap’ folder (which does not exist) and the ‘jquery’ folder in bower_components

  1. reverting back to configuration without bootstrap did not resolve the issue, the build process throws the same errors even though no ‘bootstrap’ folder exists in the “bower_components” folder

  2. ember-cli-build.js

    /*jshint node:true*/
    /* global require, module */
     var EmberApp = require('ember-cli/lib/broccoli/ember-app');
     
     module.exports = function(defaults) {
       var app = new EmberApp(defaults, {
         // Add options here
       });                                                                                                                                              
     
       // Use `app.import` to add additional libraries to the generated
       // output files.
       //
       // If you need to use different assets in different
       // environments, specify an object as the first parameter. That
       // object's keys should be the environment name and the values
       // should be the asset to use in that environment.
       //
       // If the library that you are including contains AMD or ES6
       // modules that you would like to import into your application
       // please specify an object with the list of modules as keys
       // along with the exports of each module as its value.
       
     //      app.import('bower_components/bootstrap/dist/css/bootstrap.css');
     //      app.import('bower_components/bootstrap/dist/css/bootstrap-theme.css');
     //      app.import('bower_components/bootstrap/dist/js/bootstrap.js');
         return app.toTree();
     };
  1. bower.json

     {                                                                                                                                                  
       "name": "ember-client",
       "dependencies": {
         "ember": "~2.10.0",
         "ember-cli-shims": "0.1.3",
         "jquery": "^3.2.1"
       }
     }
    
  2. package.json

{                                                                                                                                                
   "name": "ember-client",
   "version": "0.0.0",
   "description": "Small description for ember-client goes here",
   "license": "MIT",
   "author": "",
   "directories": {
     "doc": "doc",
     "test": "tests"
   },
   "repository": "",
   "scripts": {
     "build": "ember build",
     "start": "ember server",
     "test": "ember test"
   },
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^2.4.1",
     "ember-cli": "2.10.0",
     "ember-cli-app-version": "^2.0.0",
     "ember-cli-babel": "^5.1.7",
     "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-htmlbars": "^1.0.10",
     "ember-cli-htmlbars-inline-precompile": "^0.3.3",
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-jshint": "^2.0.1",
     "ember-cli-qunit": "^3.0.1",
     "ember-cli-release": "^0.2.9",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-data": "^2.10.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
     "ember-simple-auth": "1.2.0",
     "ember-welcome-page": "^1.0.3",
     "loader.js": "^4.0.10"
   },
   "engines": {
     "node": ">= 0.12.0"
  },
   "private": true,
   "dependencies": {
     "ember-ajax": "2.5.6"
   }
 }

Resultant Error in file ember-client.js (compiled output of ember build in dist folder) Deep within the file is buried one line #!/usr/bin/env node that causes the issue on the client

    grunt.log.writeln('File ' + rawFilesJs.cyan + ' created.');
    };
  });

  #!/usr/bin/env node 
                                                                                                                     
  define('ember-client/bower_components/bootstrap/grunt/change-version', ['exports'], function (exports) {
    'use strict';
  
    /* globals Set */
    /*!

Quick Fix:

  1. the uncaught syntax error exists in the compiled js file (ember-client.js) in the dist folder, removing the syntax error (highlighted in the code above) fixes the ‘uncaught syntax error’ issue so the app can load successfully in the browser.

Question: a) why is this happening? b) how do I permanently fix this issue without having to edit the compiled file manually every time I build the app?

I’ve tried to provide as much information as I thought would be necessary to summarize the issue, please let me know if you need any more details from me to get to the root of the issue.


#2

Perhaps not asking why and switching to a bootstrap NPM version like this https://github.com/martinic/ember-cli-bootstrap-css will solve it :wink:


#3

Thanks broerse, I’ll try the plugin - it’ll help in some way or the other, I’m sure :slight_smile:

Nevertheless, it seems the root of the issue was that for some reason (could be human error) there was a duplicate ‘bower_components’ folder in my ‘app’ folder which was causing the build to break.

‘How’ that folder found its way into the ‘app’ folder, I don’t know and that’s a question I don’t think I should ask :wink: