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"

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.

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:

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:

1 Like